神奇的css3（2）动画
四、Css3 2D動畫
1、2D 轉換方法
| 函數 | 描述 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿著 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿著 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿著 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿著 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿著 Y 軸。 |
2、轉換屬性
| Property | 描述 | CSS |
| transform | 適用于2D或3D轉換的元素 | 3 |
| transform-origin | 允許您更改轉化元素位置 | 3 |
?
3、形狀變換transform
可以實現元素的形狀、角度、位置等的變化。
1）rotate(); 以x/y/z為軸進行旋轉，默認為z
rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z --->矢量
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.wrapper {width: 1000px;height: 200px;border: 1px solid black;margin: 100px auto;}.item {margin-right: 30px;display: inline-block;width: 200px;height: 200px;background: red;}.item1 {/* 沿著X軸旋轉45度 */transform: rotateX(45deg);}.item2 {/* 沿著Y軸旋轉45度 */transform: rotateY(45deg);}.item3 {/* 沿著Z軸旋轉45度。默認z軸 */transform: rotate(45deg);}</style></head><body><div class="wrapper"><div class="item">未旋轉</div><div class="item item1">沿著X軸旋轉45度</div><div class="item item2">沿著Y軸旋轉45度</div><div class="item item3">沿著Z軸旋轉45度</div></div></body></html>
實例：鐘表擺盤
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.wrapper {position: relative;width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;border-radius: 50%;}li{position: absolute;top: 0;left: 50%;transform: translateX(-50%);display: inline-block;transform-origin: 0 100px;}span{/* 必須先改成行級塊元素 */display: inline-block;}li:nth-of-type(2){transform: rotate(30deg);}li:nth-of-type(2) span{transform: rotate(-30deg);}li:nth-of-type(3){transform: rotate(60deg);}li:nth-of-type(3) span{transform: rotate(-60deg);}li:nth-of-type(4){transform: rotate(90deg);}li:nth-of-type(4) span{transform: rotate(-90deg);}li:nth-of-type(5){transform: rotate(120deg);}li:nth-of-type(5) span{transform: rotate(-120deg);}li:nth-of-type(6){transform: rotate(150deg);}li:nth-of-type(6) span{transform: rotate(-150deg);}li:nth-of-type(7){transform: rotate(180deg);}li:nth-of-type(7) span{transform: rotate(-180deg);}li:nth-of-type(8){transform: rotate(210deg);}li:nth-of-type(8) span{transform: rotate(-210deg);}li:nth-of-type(9){transform: rotate(240deg);}li:nth-of-type(9) span{transform: rotate(-240deg);}li:nth-of-type(10){transform: rotate(270deg);}li:nth-of-type(10) span{transform: rotate(-270deg);}li:nth-of-type(11){transform: rotate(300deg);}li:nth-of-type(11) span{transform: rotate(-300deg);}li:nth-of-type(12){transform: rotate(330deg);}li:nth-of-type(12) span{transform: rotate(-330deg);}</style></head><body><div class="wrapper"><ul><li><span>12</span></li><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li><li><span>6</span></li><li><span>7</span></li><li><span>8</span></li><li><span>9</span></li><li><span>10</span></li><li><span>11</span></li></ul></div></body></html>?
?
2）scale(); 以x/y為軸進行縮放
scale(x, y) 接受兩個值，如果第二參數未提供，則第二個參數使用第一個參數的值
scalex(),scaley()值是數字表示倍數，不加任何單位，scale3d()，scale3d(sx,sy,sz)
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.wrapper {width: 800px;height: 100px;border: 1px solid black;margin: 100px auto;}.item {display: inline-block;width: 100px;height: 100px;background: red;border: 1px solid black;margin-right:50px;}.item1 {/* 沿著X軸縮放1倍 */transform: scaleX(2);}.item2 {/* 沿著Y軸縮放1倍 */transform: scaleY(2);}.item3 {/* x、y軸都縮放1倍 */transform: scale(2);}</style></head><body><div class="wrapper"><div class="item">未縮放</div><div class="item item1">沿著X軸縮放1倍</div><div class="item item2">沿著Y軸縮放1倍</div><div class="item item3">scale(2),x、y軸都縮放1倍</div></div></body></html>3）skew(); 對元素進行傾斜扭曲
skew(x, y);接受兩個值，第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
skewx(), skewy()
4）translate(); 可以移動距離,相對于自身位置。
translate(x, [y])
translatex(),translatey(),translatez(),translate3d(x, y, z)
實例：
.item1{transform: translateX(100px);}.item2{transform: translateY(100px);}實例：塊元素水平垂直居中顯示，元素寬高未知
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;width: 1000px;height: 600px;margin: 0 auto;border: 1px solid black;}.box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border: 1px solid red;}</style></head><body><div class="wrapper"><div class="box">你好</div></div></body></html>4、transform-origin 變換原點
任何一個元素都有一個中心點，默認情況下，其中心點是居于元素x軸和y軸的50%處，如圖：
?
也可以取下述值：
5、transition：過渡動畫
語法：transition：ele time function delay；
?transition? 屬性是css3的一個復合屬性，主要包括一下幾個子屬性
transition-property:指定過渡或動態模擬的css屬性
transition-duration:指定過渡所需要的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間
下列為過渡動畫可以參與過渡的屬性：
transition? 速錄函數可以選擇的值:
?
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.wrapper {width: 800px;height: 100px;border: 1px solid black;margin: 100px auto;}.item {display: inline-block;width: 100px;height: 100px;background: red;border: 1px solid black;margin-right: 50px;transition: 3s linear;}span:hover + div{transform: rotate(45deg)}</style></head><body><div class="wrapper"><span>hover此處 ，動畫開始:</span><div class="item">帶有過渡的動畫</div></div></body></html>?
實例：點擊具體item切換顯示圖片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {padding: 0;margin: 0;}.wrapper {position: relative;width: 600px;height: 300px;border: 1px solid black;margin: 0 auto;}.wrapper .item {width: 50px;background: deeppink;padding: 3px;text-align: center;margin-top: 50px;margin-left: 10px;border-radius: 10px;box-shadow: 2px 3px 8px 3px #666;}.wrapper img {position: absolute;top: 0;left: 50px;width: 400px;height: 300px;opacity: 0;transition: all 1s linear; border-radius: 20px;}.item1:hover + img {left: 100px;opacity: 1;}.item2:hover + img {left: 130px;opacity: 1;}.item3:hover+img {left: 130px;opacity: 1;}</style></head><body><div class="wrapper"><div class="item item1">dog1</div><img src="./dog1.jpg"><div class="item item2">dog2</div><img src="./dog2.jpg"><div class="item item3">dog3</div><img src="./dog3.jpg"></div></body></html>6、動畫animation???
?animation 屬性為css3的復合屬性，主要包括以下子屬性
1)animation-name:? 此屬性為執行動畫的 keyframe 名
2)animation-duration: 此屬性為動畫執行的時間
3)animation-timing-function: 指定過渡函數速率
4)animation-delay: 執行延遲時間
5)animation-direction: normal/reverse/alternate/alternate-reverse;
（要用來設置動畫播放方向：normal：默認值。動畫按正常播放。reverse：動畫反向播放。alternate：動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。alternate-reverse：動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。）
6)animation-iteration-count:infinite/number;
（主要用來定義動畫的播放次數。n 播放次數，infinite 無限次）
7)animation-fill-mode: none/forwards/backwards;
（定義在動畫開始之前和結束之后發生的操作。主要具有四個屬性值：none:默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處。forwards: 表示動畫在結束后繼續應用最后的關鍵幀的位置。backwards:會在向元素應用動畫樣式時迅速應用動畫的初始幀。both:元素動畫同時具有forwards和backwards效果）
8)animation-play-state:runing/pasued;
（主要用來控制元素動畫的播放狀態。running 播放，paused? 暫停）
7、關鍵幀@keyframes
animation 動畫會按照keyframes 關鍵幀里面指定的幀狀態而過渡執行。
0% - 100% 代表動畫的時間過渡
@keyframes demoMove{
0%{ background-color:red;}
10%{ background-color:green;}
20%{ background-color:white;}
50%{ width:200px;}
100%{ height:200px;}
}
幀頻里面如果只有 0% 和 100%兩個關鍵幀，那么可以用 from to 代替
@keyframes demoMove{
from{ background-color:red;}
to{ height:200px;}
}
實例：方塊運動
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper {position: relative;width: 300px;height: 300px;margin: 0 auto;border: 1px solid black;}.demo {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background: red;animation: move 4S linear infinite;}@keyframes move {25% {left: 200px;top: 0;background: green;}50% {left: 200px;top: 200px;background: pink;}75% {left: 0;top: 200px;background: blue;}100% {left: 0;top: 0;background: red;}}</style></head><body><div class="wrapper"><div class="demo" id="demo"></div></div></body></html>實例：網頁云音樂轉盤
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding: 0;margin: 0;}.wrapper{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);/* border: 1px solid black; */}button{position: absolute;left: 50%;transform: translateX(-50%);bottom: 150px;color: #fff;font-size: 20px;padding: 15px;background: red;}.table{width: 200px;height: 200px;border: 50px solid black;border-radius: 50%;animation: turn 5s linear infinite paused;background: url('./dog1.jpg');background-size: 100% 100%;}.pian{position: absolute;left: 50%;top: -70px;transform: translateX(-50%);width: 10px;height: 150px;background: orchid;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;transform-origin: top;transform: rotate(-60deg);}.active{transform: rotate(-30deg);}@keyframes turn{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style></head><body><button id = "btn">播放/停止</button><div class="wrapper"><div class="table"></div><div class="pian"></div></div><script>var oTable = document.getElementsByClassName('table')[0];var oPian = document.getElementsByClassName('pian')[0];var flag = true;btn.onclick = function(){if(flag){flag = false;oTable.style.animationPlayState = "running";oPian.className = "pian active"}else{oTable.style.animationPlayState = "paused";oPian.className = "pian"flag = true;}}</script></body></html>五、Css3 3D動畫
1、3D轉換方法
| 函數 | 描述 |
| matrix3d(n,n,?n,n,n,n?, n,n,n?,n,n,n,?n,n,n,n?) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉化。 |
| translateX(x) | 定義 3D 轉化，僅使用用于 X 軸的值。 |
| translateY(y) | 定義 3D 轉化，僅使用用于 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉化，僅使用用于 Z 軸的值。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
| perspective(n) | 定義 3D 轉換元素的透視視圖。 |
2、轉換屬性
| 屬性 | 描述 | CSS |
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transform-origin | 允許你改變被轉換元素的位置。 | 3 |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 | 3 |
| perspective | 規定 3D 元素的透視效果。 | 3 |
| perspective-origin | 規定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 | 3 |
3、transform-style
transform-style: flat|preserve-3d;
flat: 默認，子元素將不保留其 3D 位置
preserve-3d : 子元素將保留其 3D 位置。
注意：transform-style 屬性需要設置在父元素中, 高于任何嵌套的變形元素。設置了transform-style:preserve-3d的元素，就不能防止子元素溢出設置overflow：hidden；否則會導致preserve-3d失效。
4、perspective——景深?
?
以簡單的把perspective理解成人距離顯示器的距離，此值越大的效果越差，越小效果越好。假設你距離100米和1米的距離去看一個邊長一米的正方體。
重點記住perspective的值要大于3d物體的值。
①perspective: 600px ;默認值none：物體距離人眼的距離是600px;
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* perspective: 600px; */}.item{width: 200px;height: 200px;background: red;transform: rotateX(45deg);}</style></head><body><div class="wrapper"><div class="item"></div></div></body></html>沒有景深：
?
有景深：
perspective: 600px;
?
②perspective-origin:默認值是50% 50%
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective: 600px;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: rotateX(90deg);}</style></head><body><div class="wrapper"><div class="item"></div></div></body></html>當有多個變形元素時，把景深設置到父元素上時，只有一個透視點；把景深設置到子元素上時，每一個變形元素都有一個透視點。
實例：父元素設置景深
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective: 600px;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: rotateX(75deg);}</style></head><body><div class="wrapper"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>實例：子元素設置景深
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(75deg);}</style></head><body><div class="wrapper"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>5、backface-visibility: visible | hidden
在元素運動過程中，能否展示元素的背面
實例：可見
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(100deg);backface-visibility: visible;}</style></head><body><div class="wrapper"><div class="item"></div> </div></body></html>實例：不可見
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(100deg);backface-visibility: hidden;}</style></head><body><div class="wrapper"><div class="item"></div> </div></body></html>6、3d變化是二人轉：元素在轉，坐標軸其實也在轉
兩個相同的元素, 其中一個設置了rotateX(90deg), 另一個設置rotateX(-90deg)，然后同時設置translateZ(100px)；這時, 他們在空間的距離是200px, 而不是0;
實例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper {position: relative;width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective-origin: center;perspective: 600px;}.item1 {position: absolute;top: 0;width: 200px;height: 200px;background: red;transform: rotateX(90deg) translateZ(100px);}.item2 {position: absolute;top: 0;width: 200px;height: 200px; background: green;transform: rotateX(-90deg) translateZ(100px);}</style></head><body><div class="wrapper"><div class="item1"></div><div class="item2"></div></div></body></html>實例：旋轉照片墻
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;transform-style: preserve-3d;width: 200px;height: 200px;margin: 200px auto;animation: turn 4s linear reverse infinite;}.wrapper div{position: absolute;top: 0;left: 0;width: 200px;height: 180px;line-height: 200px;opacity: 0.5;text-align: center;color: #fff;font-size: 30px;background: red;}.wrapper .item1{background: red;transform: rotateY(0deg) translate3d(0,0,200px);}.wrapper .item2{background: green;transform: rotateY(60deg) translate3d(0,0,200px);}.wrapper .item3{background: orange;transform: rotateY(120deg) translate3d(0,0,200px);}.wrapper .item4{background: deepskyblue;transform: rotateY(180deg) translate3d(0,0,200px);}.wrapper .item5{background: deeppink;transform: rotateY(240deg) translate3d(0,0,200px);}.wrapper .item6{background: purple;transform: rotateY(300deg) translate3d(0,0,200px);}@keyframes turn{0%{transform: rotateX(-20deg) rotateY(0deg);}100%{transform: rotateX(-20deg) rotateY(360deg);}}</style></head><body><div class="wrapper"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div></div></body></html>六、Css 3 動畫性能優化
1. 盡可能多的利用硬件能力，如使用3D變形來開啟GPU加速
?
注意：如動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack：
?
如下面一個元素通過translate3d右移500px的動畫流暢度會明顯優于使用left屬性:
注：3D變形會消耗更多的內存與功耗，應確實有性能問題時才去使用它，兼在權衡
2. 盡可能少的使用box-shadows與gradients, 這兩個都是頁面性能殺手，能避免盡量避免。
3. 盡可能的讓動畫元素不在文檔流中，以減少重排。
?4. 優化 DOM reflow
實例：立方體旋轉
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;transform-style: preserve-3d;width: 200px;height: 200px;margin: 200px auto;animation: turn 5s linear infinite;}.wrapper div{position: absolute;top: 0;left: 0;width: 200px;height: 200px;line-height: 200px;opacity: 0.5;text-align: center;color: #fff;font-size: 30px;background: red;}.wrapper .item1{background: red;transform: rotateX(0deg) translate3d(0,0,100px);}.wrapper .item2{background: deepskyblue;transform: rotateX(180deg) translate3d(0,0,100px);}.wrapper .item3{background: green;transform: rotateY(90deg) translate3d(0,0,100px);}.wrapper .item4{background: orange;transform: rotateY(-90deg) translate3d(0,0,100px);}.wrapper .item5{background: deeppink;transform: rotateX(90deg) rotateZ(90deg) translate3d(0,0,100px);}.wrapper .item6{background: purple;transform: rotateX(-90deg) rotateZ(90deg) translate3d(0,0,100px);}@keyframes turn{0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}25%{transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);}50%{transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);}75%{transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);}100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}</style></head><body><div class="wrapper"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div></div></body></html>?
轉載于:https://www.cnblogs.com/wangzhenling/p/8989678.html
總結
以上是生活随笔為你收集整理的神奇的css3（2）动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一次作业
- 下一篇： 机器学习平台的简单调研