CSS3 2D和3D转换 Transform
Transform 適應于對任一DOM元素的2D或3D轉換,這些轉換效果有:旋轉(rotate)、拉伸(scale)、平移(move)、傾斜(skew)等，利用Transform和javascript可以制作一些簡單的動畫，可以為web應用帶來些意想不到的效果。
目前瀏覽器并不是完全支持所有的Transform ，IE9、Firefox 和Opera 僅支持2D transforms ，相應的CSS定義為：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都支持2D和3D transforms ，相應的CSS定義為：-webkit-transform 。
下面給出一個transform定義實例：
| div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ } |
| <font color="#c0504d">1.1?transform</font> |
| 語法:transform: none|<i>transform-functions</i>; |
| 說明: |
| Value | Description |
| none | 定義這不需要轉換 |
| matrix(n,n,n,n,n,n) | 使用有6個值的矩陣(matrix)來定義一個 2D 轉換 |
| matrix3d | 使用有4*4的矩陣(matrix)來定義一個 3D 轉換 |
| translate(x,y) | 定義一個2D 轉換,x:水平位移,y:垂直位移,個人覺得和margin-left(left) 和margin-top(top)類似. |
| translate3d(x,y,z) | 定義一個3D 轉換,x:水平位移,y:垂直位移,z:Z方向的位移 |
| translateX(x) | 定義一個水平方向2D 轉換 |
| translateY(y) | 定義一個垂直方向2D 轉換 |
| translateZ(z) | 定義一個Z方向3D 轉換 |
| scale(x,y) | 定義一個2D 拉伸, x:水平拉伸,y:垂直拉伸 |
| scale3d(x,y,z) | 義一個3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸 |
| scaleX(x) | 定義一個水平方向拉伸 |
| scaleY(y) | 定義一個垂直方向拉伸 |
| scaleZ(z) | 定義一個Z方向的拉伸 |
| rotate(angle) | 定義一個 2D 旋轉, angle :旋轉角度(deg) |
| 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轉換效果和透視圖 |
1.2 transform-origin
定義元素旋轉的位置，配合transform使用。
語法：transform-origin:?x-axis y-axis z-axis;
說明：
| Property Value | Description |
| x-axis | 定義X軸的轉換位置. 可能的值有:
|
| y-axis | 定義Y軸的轉換位置. 可能的值有:
|
| z-axis | 定義Z軸的轉換位置. 可能的值有:
|
1.3 transform-style
對于支持3D轉換的瀏覽器，指定元素內的子元素是否進入其3D環境中。
語法：transform-style: flat|preserve-3d;
說明：
| Property Value | Description |
| flat | 子元素不參與3D轉換 |
| preserve-3d | 子元素將顯示在3D環境中 |
實例:
總結
以上是生活随笔為你收集整理的CSS3 2D和3D转换 Transform的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android4.1 onTouchEv
- 下一篇： CSS3 -webkit-transi