|
   |
| Forum Wonder Study 寓教于乐 Wonder Effect js/as/css分享 css3新属性之transform变换 (css3 transform) |
| css3新属性之transform变换 |
Date Fr, 2013-06-14, 16:57 | Msg 1
 
transform其实只需要下面这样子
Code transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ 不过变换有好多种变法，每一种对应的格式都不同，如果是3D的，还需要你的立体思维灰惨好有木有。以下，有这么多—— 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 转换元素定义透视视图  |
| |||
| |||
