• Page 1 of 1
  • 1
css3新属性之transform变换
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 转换元素定义透视视图
  • Page 1 of 1
  • 1
Search: