實現立方體旋轉
HTML部分：
<body class="body">
<div class="rect-wrap"> <!-- //舞臺元素，設置perspective，讓其子元素獲得透視效果。 -->
<div class="container"> <!-- //容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現 -->
<div class="top slide">1</div> <!-- //立方體的六個面 -->
<div class="bottom slide">2</div>
<div class="left slide">3</div>
<div class="right slide">4</div>
<div class="front slide">5</div>
<div class="back slide">6</div>
</div>
</div>
</body>
CSS:
<style>
.rect-wrap {
position: relative;
perspective: 2000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform-origin: 50% 50% 100px; /* //設置3d空間的原點在平面中心再向Z軸移動200px的位置 */
/* left: 50%;
margin-left: -200px; */
top: 100px;
}
.slide {
width: 200px;
height: 200px;
position: absolute;
background: #000;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.top {
left: 100px;
top: -100px;
transform: rotateX(-90deg);
transform-origin: bottom;
background: red;
}
.bottom {
left: 100px;
bottom: -100px;
transform: rotateX(90deg);
transform-origin: top;
background: grey;
}
.left {
left: -100px;
bottom: 100px;
transform: rotateY(90deg);
transform-origin: right;
background: green;
}
.right {
left: 300px;
bottom: 100px;
transform: rotateY(-90deg);
transform-origin: left;
background: yellow;
}
.front {
left: 100px;
top: 100px;
transform: translateZ(200px);
background: black;
}
.back {
left: 100px;
top: 100px;
transform: translateZ(0);;
background: blue;
}
@keyframes rotate-frame {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
.container{
animation: rotate-frame 30s linear infinite;
}
</style>
1.3維空間圖
電腦屏幕中心為原點，橫向為X軸，縱向為Y軸，人臉的方向為Z軸；
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動距離
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定義元素的旋轉角度。
2.perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
註釋：perspective 屬性只影響 3D 轉換元素。
提示：請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置。
3.transform-style屬性
transform-style: flat|preserve-3d; 默認值為flat,表示子元素以2D平面呈現；perserve-3d表示子元素以3D平面呈現
4.transform-origin屬性
transform-origin 屬性允許您改變被轉換元素的位置（可以理解為元素以哪個位置為旋轉原點）。
語法：
transform-origin: x-axis y-axis z-axis;
實現立方體旋轉