3D翻滾特效
1. 特效一般指的就是比較炫酷的影片；
2. 用于定義影片的一些屬性，列如：transition，animation；
3. 這些屬性可以使影片位移、旋轉、縮放、傾斜，從而實作更多不一樣的效果；
4. 而在CSS3中，更是定義了transform屬性來完成2D或3D的特效；
5. Transform里更是定義了一些元素語法，如下：
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x,y) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設定 X 軸的值來定義縮放轉換。
scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖。
6. 實作3D的翻滾效果；
7. 先定義一個布局；如下：
8. 然后，給 div設定寬高之后，再設定以下屬性即可；
transform-style: preserve-3d; //定義為3D樣式；
transition: 1.5s; //影片執行的時長；
transform: translateZ(-60px); //設定層次感，類似于z-index屬性
transform:rotateY(180deg); //旋轉度，以1類似80度旋轉；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/15326.html
標籤：HTML(CSS)
上一篇：我見過的最牛逼的一行代碼
下一篇：問題沖突的總結