"Distal 5 minutes" is implemented using CSS3 cool 3D Pivot

3D animation is now becoming increasingly popular, it has been widely applied to various platforms, such as Ali cloud and Huawei cloud, webpack official website and so on. It may be closer to the real showcase our products and presentation, brought a strong sense of visual impact. So, to make themselves more excellent, css3 3D animation is essential.

You will learn

CSS3 3D conversion introduction of common API
CSS3 3D scenarios
CSS3 3D realization of a cube

Start

1.CSS3 3D conversion introduction of common API

First First on a css 3D coordinate system:

Next we introduce some common api:

Rotation

rotateX()
rotateY()
rotateZ()

Api represent more than a few about x, y, z axis, rotation about the examples are examples of the x-axis is as follows:

Related code is as follows:

<style>.d3-wrap {    position: relative;    width: 300px;    height: 300px;    margin: 120px auto;    /* 规定如何在 3D 空间中呈现被嵌套的元素 */    transform-style: preserve-3d;    transform: rotateX(0) rotateY(45deg);    transform-origin: 150px 150px 150px;}
.rotateX {    width: 200px;    height: 200px;    background-color: #06c;    transition: transform 2s;    animation: rotateX 6s infinite;}
@keyframes rotateX {    0% {        transform: rotateX(0);    }    100% {        transform: rotateX(360deg);    } }</style><div class="d3-wrap">    <div class="rotateX"></div></div>

位移（Transform）

translateX (x) defined 3D conversion, only the values for the X axis
translateY (y) define a 3D conversion, only the value for the Y-axis
translateZ (z) defined 3D conversion, only the value for the Z axis

Api represent more than a few relative x, y, z-axis displacement, the following example is an example of the z-axis displacement:

Here we should be noted that in order to see the effect of the displacement, we need to add the following attributes on the parent container:

.d3-wrap {    transform-style: preserve-3d;    perspective: 500;    /* 设置元素被查看位置的视图 */    -webkit-perspective: 500;}

When an element is a perspective define attributes, which subelements perspective effect is obtained, and not the element itself.
code show as below:

.d3-wrap {    position: relative;    width: 300px;    height: 300px;    margin: 120px auto;    transform-style: preserve-3d;    perspective: 500;    -webkit-perspective: 500;    transform: rotateX(0) rotateY(45deg);    transform-origin: center center;}
.transformZ {    width: 200px;    height: 200px;    background-color: #06c;    transition: transform 2s;    animation: transformZ 6s infinite;}
@keyframes transformZ {    0% {        transform: translateZ(100px);    }    100% {        transform: translateZ(0);    } }

3D Scaling

scaleX (x) given a 3D X-axis scale value conversion
scaleY (x) given a 3D Y-axis scale value conversion
scaleZ (x) is given a Z-axis scale 3D conversion value

Zoom setting, and similar to the above, here do not introduce too much.

In theory these three common change has been good enough, our concern is to get elements showing a 3D effect, the following can not be ignored API is also important:

2.CSS3 3D scenarios

css 3D is mainly used in the interaction model and the effect of the site, such as:

3D Carousel Figure
3D Products
Indoor 3D simulation
h5 3D event page, is more typical of a year-end summary Taobao H5
3D data visualization Mapping
Figure 3D model

其实如果css 3D用的熟悉了，一些基本的3D模型完全可以用css画出来。

3.CSS3 3D 实现一个立方体

核心思路就是用6个面去拼接，通过设置rotate和translate来调整相互之间的位置，如下：

具体代码如下：

.container {    position: relative;    width: 300px;    height: 300px;    margin: 120px auto;    transform-style: preserve-3d;    /* 为了让其更有立体效果 */    transform: rotateX(-30deg) rotateY(45deg);    transform-origin: 150px 150px 150px;    animation: rotate 6s infinite;}.container .page {    position: absolute;    width: 300px;    height: 300px;    text-align: center;    line-height: 300px;    color: #fff;    background-size: cover;}.container .page:first-child {    background-image: url(./my.jpeg);    background-color: rgba(0,0,0,.2);}.container .page:nth-child(2) {    transform: rotateX(90deg);    transform-origin: 0 0;    transition: transform 10s;    background-color: rgba(179, 15, 64, 0.6);    background-image: url(./my2.jpeg);}
.container .page:nth-child(3) {    transform: translateZ(300px);    background-color: rgba(22, 160, 137, 0.7);    background-image: url(./my3.jpeg);}
.container .page:nth-child(4) {    transform: rotateX(-90deg);    transform-origin: -300px 300px;    background-color: rgba(210, 212, 56, 0.2);    background-image: url(./my4.jpeg);}.container .page:nth-child(5) {    transform: rotateY(-90deg);    transform-origin: 0 0;    background-color: rgba(201, 23, 23, 0.6);    background-image: url(./my5.jpeg);}.container .page:nth-child(6) {    transform: rotateY(-90deg) translateZ(-300px);    transform-origin: 0 300px;    background-color: rgba(16, 149, 182, 0.2);    background-image: url(./my6.jpeg);}

html结构

<div class="container">    <div class="page">A</div>    <div class="page">B</div>    <div class="page">C</div>    <div class="page">D</div>    <div class="page">E</div>    <div class="page">F</div></div>

扩展

我们可以基于上面介绍的，给父元素添加动画或者拖拽效果，这样就可以做成更有交互性的3D方块了，比如置骰子游戏，vr场景，3D相册等等，具体实现我会抽空依次总结出来～

最后

如果想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知识和实战，欢迎关注《趣谈前端》公众号，一起学习讨论，共同探索前端的边界。