transform-style:preserve：給需要做3D動(dòng)畫(huà)的元素的父元素開(kāi)啟3D效果
當(dāng)然菊碟，只給元素開(kāi)啟3D效果是沒(méi)有效果的尖飞，這個(gè)時(shí)候我們需要設(shè)置舞臺(tái)的深度惶看，也就是設(shè)置Z軸的大小暂论。
注意：當(dāng)你設(shè)置后篙顺，你移動(dòng)的深度不能夠超出舞臺(tái)深度偶芍，一超過(guò)舞臺(tái)深度，你設(shè)置的動(dòng)畫(huà)效果將會(huì)超出Z軸德玫，從而無(wú)法使用匪蟀。
那么我們開(kāi)啟3D效果后，如果需要添加效果宰僧，比如：平移translate萄窜、旋轉(zhuǎn)rotate……
那么旋轉(zhuǎn)的話就必須有一個(gè)原點(diǎn)，或是叫中心點(diǎn)，那么這個(gè)時(shí)候我們就需要用到一個(gè)屬性：
perspective：開(kāi)啟3D模式的舞臺(tái)中心點(diǎn)（中心點(diǎn)）的位置
無(wú)論是開(kāi)啟3D效果查刻，模式，還是設(shè)置舞臺(tái)深度凤类，亦或是設(shè)置基準(zhǔn)點(diǎn)穗泵，都是給父元素設(shè)置的。
以下是一個(gè)立方體旋轉(zhuǎn)效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方體</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
height: 100%;
}
.big{
-webkit-perspective: 1000px;
width: 20em;
height: 20em;
left: 50%;
top: 50%;
margin-left: -10em;
margin-top: -10em;
position: absolute;
}
.box{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transtion: all 2.5s;
-webkit-animation: move 5s infinite linear;
}
@keyframes move{
50%{
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
100%{
-webkit-transform: rotateX(720deg) rotateY(720deg);
}
}
.box * {
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(54, 226, 248, 0.5);
-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
}
section:first-child{
-webkit-transform: translateZ(10em);
}
section:nth-child(2){
-webkit-transform: rotateX(180deg) translateZ(10em);
}
section:nth-child(3){
-webkit-transform: rotateY(-90deg) translateZ(10em);
}
section:nth-child(4){
-webkit-transform: rotateY(90deg) translateZ(10em);
}
section:nth-child(5){
-webkit-transform: rotateX(90deg) translateZ(10em);
}
section:last-child{
-webkit-transform: rotateX(-90deg) translateZ(10em);
}
</style>
</head>
<body>
<div class="big">
<div class="box">
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>
<section class="section6"></section>
</div>
</div>
</body>
</html>
