css3 3d效果及動畫學習

標籤：

css參考手冊：

http://www.phpstudy.net/css3/

http://www.css88.com/book/css/

 

呈現3d效果：
-webkit-transform-style:preserve-3d;

透視距離：
-wenkit-perspective:300;

視角：
-webkit-perspective-origin:25% 75%；/*數字正負均可*/

旋轉和變換：
transform: translatex(-90px) translatez(90px) rotatey(90deg);
/*rotateX旋轉X軸,rotateY旋轉Y軸,rotateZ旋轉Z軸
translateX,translateY,translateZ在XYZ軸上移動
scaleZ(sz)Z軸縮放
*/


旋轉頁面要先設定position: absolute;使其脫離文檔流。


動畫效果：
animation /*簡寫屬性，用於設定動畫。*/
-webkit-transform-origin: 90px 90px 90px;/*設定旋轉基準點*/
@keyframes/*設定動畫*/

 

css3 3d效果及動畫學習