本文是在學習一篇博文後進行總結和一定的修改的，原博文鏈接這裏寫鏈接內容
先貼代碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<link rel="stylesheet" type="text/css" href="css/move.css">
</head>
<body>
<div class="wrapper w2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>CSS
.wrapper {
width: 50%;
float: left;
}
@keyframes rotateHAHA{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube {
font-size: 4em;
width: 2em;
height: 2em;
margin: 1.5em auto;
transform-origin: 1em 1em;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
}
.cube:hover{
animation: rotateHAHA 4s linear infinite;
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front {
transform: translateZ(1em);//爲什麼要translateZ(1em)。1em代表了什麼？
}
.top {
transform: rotateX(90deg) translateZ(1em);//注意rotate和translateZ的順序。之後會提到。
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
}
.back {
transform: rotateY(-180deg) translateZ(1em);
}
.w2{
perspective-origin: 20% 20%;
perspective: 1000px;
}
幾點學習心得記錄如下：
初始工作
想要實現3D效果，首先需要設定transform-style: preserve-3d;。這個屬性只對本元素以及子元素起作用，不對孫子元素起作用。
perspective設置
perspective屬性的含義：可以理解爲在人眼面前有一個展示板，而這個屬性的大小就是這個展示板距離人眼的距離。如果距離越近，自然透視程度就越強，距離越遠，透視程度就越弱。
有兩種方式設置perspective：
perspective: 600px;或者
transform:perspective(600px);這兩種設置的區別先看例圖：（轉自這裏寫鏈接內容)
可以看出，第一種設置方式是把整個頁面當成一個舞臺，各個物體雖然屬性相同，但是互相之間是有透視關係的。
而第二種設置方式是每一個物體獨立開來，這樣互不影響。
translateZ的設置
transform:translateZ(length)的作用是將展示的物體脫離展示板的距離。也就是說，如果參數越大，脫離展示板越遠，離人眼就越近。可以想象，如果這個length的值大於perspective的值，那麼物體位於人眼後面，此時這個物體將看不到。
視點位置設置
perspective-origin屬性：默認的值是50% 50%也就是說位於物體中央。我們可以修改這個參數，使得我們的視角可以位於高一點或者第一點的位置。具體可以看這張w3c的圖
父元素與子元素的旋轉關係
可以看到cube是六個面的容器。因此這六個面的旋轉都是相對於cube父容器的，如果父容器旋轉，六個面也跟着旋轉，就形成了我們看到的動畫效果。
rotate()理解
關於rotateX()、rotateY()、rotateZ()：我們知道，屏幕上，右是x軸正方形，上是y軸正方向，垂直平面是Z方向。因此rotateX的具體含義是繞着X軸旋轉，其他類似。
translateZ的參數解釋
關於translateZ()的參數爲什麼填的是1em。因爲旋轉默認是在展示板上的物體中心點。而cube的長寬都是2em。故在Z軸上升高1em然後旋轉就可以形成正方體。
transform具有多個值時執行順序
transform具有多個屬性的時候，執行順序是從後到前。比如這個例子中就是先translateZ，再rotate。故寫多個屬性的時候，應該將最先執行的代碼寫在最後面！
