CSS3的動畫及3D轉換（animation、transform、rotate3d 、perspective等）【總結】

1. 動畫

① 創建

 @keyframes  // 創建動畫

語法：

@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector // 動畫持續時間的百分比

例：

@keyframes myMove{
   0%   {top:0px;}
   25%  {top:200px;}
   50%  {top:100px;}
   75%  {top:200px;}
   100% {top:0px;}
}

② 屬性

animation // 動畫屬性的簡寫屬性

語法：

 animation：name duration timing-function delay iteration-count

• name：動畫名稱
• duration：動畫指定需要多少秒或毫秒完成
• timing-function：動畫效果的速度
• delay：延時
• iteration-count：value/infinite；動畫播放次數
• animation-direction: normal|alternate；是否反向播放動畫
• animation-play-state: paused|running；動畫正在運行還是暫停

③ 關鍵幀

  animation-timing-function：step-start/step-end

• 指定在每個間隔的起點或是終點發生階躍變化，默認爲 end。
• step-start 動畫執行時爲開始左側，端點的部分爲開始。
• step-end 動畫執行時以結尾端點爲開始，默認值爲 end。

2. 3D

① transform轉換

語法：

transform： rotate3d()/ translate3d()

• rotate3d(x,y,z,angle)：旋轉
• translate3d(x,y,z)：平移

② rotate3d

rotate3d(x,y,z,angle)

• x: 在x軸是否旋轉，是爲1，否爲0；
• y: 在y軸是否旋轉，是爲1，否爲0；
• z: 在z軸是否旋轉，是爲1，否爲0；
• angle：旋轉角度；
• rotateX(angle) ：定義沿 X 軸的 3D 旋轉。正值前，負值後；
• rotateY(angle) ：定義沿 Y 軸的 3D 旋轉。正值右，負值左；
• rotateZ(angle) ：定義沿 Z 軸的 3D 旋轉。

③ translate3d

• translate3d(x,y,z)；
• translateX(x)：定義 3D 轉化，僅使用用於 X 軸的值；
• translateY(y)：定義 3D 轉化，僅使用用於 Y 軸的值；
• translateZ(z)：定義 3D 轉化，僅使用用於 Z軸的值。

④ perspective

perspective：設置從何處查看一個元素的角度

語法：

 perspective: number|none;

• number：元素距離視圖的距離，以像素計；
• none：默認值。與 0 相同。不設置透視；
• Perspective-origin：視點；
• perspective-origin：50% 50%；表示瀏覽器從正中心觀察這個世界。

⑤ transform-style

transform-style：規定被嵌套元素如何在 3D 空間中顯示；

語法：

transform-style: flat|preserve-3d；

• flat：表示所有子元素在2D平面呈現；
• preserve-3d：表示所有子元素在3D空間中呈現。

---