CSS3景深三维变换属性及旋转三维立方体的实现.docx

ul{/*调整ul标签的样式，取消内边距、外边距，和“点”样式*/

padding:

0;

margin:

0;

list-style-type:

none;

}

.stage{/*设置舞台元素在屏幕居中，设置合适的景深大小*/

position:

relative;

width:

800px;

height:

800px;

margin:

100pxauto;

perspective:

800px;

}

@keyframesmove{/*设置动画关键帧*/

0%{

transform:

rotateX（0deg）;

}

25%{

transform:

rotateX（180deg）;

}

50%{

transform:

rotateX（360deg）rotateY（0deg）;

}

75%{

transform:

rotateX（360deg）rotateY（180deg）;

}

100%{

transform:

rotateX（360deg）rotateY（360deg）;

}

}

.stage.three-d-box{/*动画容器居中在舞台元素中间*/

width:

200px;

height:

200px;

position:

absolute;

left:

50%;

top:

50%;

margin:

-100px00-100px;

transform-style:

preserve-3d;/*设置3D属性让子元素三维空间呈现*/

animation:

move3slinearinfinite;/*设置动画*/

}

.stage.three-d-box>li{/*设置动画子元素公共属性*/

position:

absolute;

width:

200px;

height:

200px;

left:

0;

top:

0;

font-size:

50px;

line-height:

200px;

text-align:

center;

opacity:

0.5;

}

/*为了保证我们对立方体位置的控制，我们需要让动画容器在立方体的中间位置*/

.stage.three-d-box>li:

nth-child

（1）{

background-color:

red;

transform:

translateZ（-100px）;

}

.stage.three-d-box>li:

nth-child

（2）{

background-color:

greenyellow;

transform:

translateZ（100px）;

}

.stage.three-d-box>li:

nth-child（3）{

background-color:

cornflowerblue;

transform:

rotateX（90deg）translateZ（100px）;

}

.stage.three-d-box>li:

nth-child（4）{

background-color:

orangered;

transform:

rotateX（-90deg）translateZ（100px）;

}

.stage.three-d-box>li:

nth-child（5）{

background-color:

deeppink;

transform:

rotateY（90deg）translateZ（100px）;

}

.stage.three-d-box>li:

nth-child（6）{

background-color:

lightcoral;

transform:

rotateY（-90deg）translateZ（100px）;

}

大功告成

这样我们就会得到如下酷炫的三维立方体

注意在3D变换transform中，旋转与位移函数的顺序不同，元素展现的位置是不同的，这是因为元素的坐标轴是随着我们变换而变化的。

上面的代码如果有不明白的地方，可以拷贝到浏览器进行调试，整体的思路就是

1.设置舞台元素（perspective：

xxxpx）

2.设置动画容器（transform-style：

preserve-3d）

3.通过旋转、位移调整动画子元素的位置

4.对动画容器应用动画效果

最后我们通过这个正方体来加深三维变换相关属性的理解

backface-visibility

添加样式前的正方体

现在我们来添加样式

.stage.three-d-box>li{

......

backface-visibility:

hidden;

}

大家来找茬，可以看到背对我们的元素全部看不见了，这就是backface-visibility:

hidden;的作用