css3動畫屬性整理

transition允許css屬性值在一定時間內可以平滑地過渡。其主要包括四個屬性值：

這裡需要注意一下幾點

transition需要事件觸發，不可以在網頁載入時自動發生

transition是一次性的，不能重**生，除非是一再觸發

"box">
複製**

animation動畫，其可以不需要事件觸發就可以進行，其屬性如下：

@keyframes，控制動畫的中間環節，其主要必須需要的三個值是：值描述

animation-name

動畫名稱

keyframes-selector

動畫市場的百分比，0-100%

css-styles

css樣式屬性

"box">
複製**

主要包括旋轉(rotate)、扭曲(skew)、縮放(scale)、移動(translate)和矩陣變形(matrix)。其中比較常用的三種是rotate、scale和translate。

注意該屬性必須和transform一起使用

transform-origin:x-axis y-axis z-axis。其預設值是50% 50% 0。

x-axis和y-axis的取值可以是left、center、right、length和%。

z-axis的取值只能是length

首先要弄清楚，在3d的方向怎麼確定，哪個方向是x軸，哪個方向是y軸，哪個方向是z軸。這裡可以通過下圖看出。通過這個圖，我們就可以確認rotatex、rotatey、rotatez分別是按照哪個方向轉換。

結合3d轉換的話，需要知道乙個屬性，perspective（視角）

perspective

定義3d元素距視角的距離，其值是number|none。其視點是瀏覽器正前方，就是我們眼睛看著電腦所在的方位。

perspective-origin 設定基點的位置

perspective-origin: x-axis y-axis;

"box-container">
"cc box">rolatex(45deg)
"box-container">
"dd box">rolatey(45deg)
"box-container">
"ee box">rolatez(45deg)
複製**

不加perspective: 600px;其效果圖如下左圖，加上perspective: 600px;其效果圖如右圖：

這裡如果不加上perspective這個屬性，你會發現影象還是平面的效果，但是加上這個屬性給視點到瀏覽器乙個視覺距離之後，會看到乙個3d的效果。

注意有乙個屬性。transform-style: preserve-3d的屬性設定，預設值為flat，即「素描作品」。這個屬性的設定旨在告訴子元素需要遵循怎樣的空間體系規則。這個屬性不能繼承，因此只要有子元素需要設定空間體系規則，就得在父元素宣告這個屬性。