CSS transform属性

• 

  定义和用法

  transform属性将2D或3D变换应用于元素。此属性允许您旋转，缩放，移动，倾斜等元素。

  特征	说明
  默认值	none
  继承	没有
  动画	有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.transform="rotate(7deg)"尝试一下

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	IE/Edge	Chrome	FireFox	Safari	Opera
  属性名称
  transform(2D)	10.0 9.0 -ms-	36.0 4.0 -webkit-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
  transform(3D)	10.0	36.0 12.0 -webkit-	10.0	9.0 4.0 -webkit-	23.0 15.0 -webkit-

• 

  CSS语法

  transform: none|transform-functions|initial|inherit;
• 

  实例

  旋转，倾斜和缩放三个不同的<div>元素：

  div.a {
    transform: rotate(20deg);
  }
  
  div.b {
    transform: skewY(20deg);
  }
  
  div.c {
    transform: scaleY(1.5);
  }
  

  尝试一下
• 

  属性值

  属性值	描述
  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)	使用16个值的4x4矩阵定义3D变换
  translate(x,y)	定义2D转换
  translate3d(x,y,z)	定义3D转换
  translateX(x)	仅使用X轴的值定义平移
  translateY(y)	仅使用Y轴的值定义平移
  translateZ(z)	仅使用Z轴的值定义3D平移
  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变换元素的透视图
  initial	将此属性设置为其默认值。查看initial关键字
  inherit	从其父元素继承此属性。查看inherit关键字

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：CSS 2D变换

  CSS教程：CSS 3D变换