例
旋转<div>元素：
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
试一试» 定义和用法
转换属性应用于一个2D或3D变换的元件。 这个属性可以让你旋转，缩放，移动，歪斜等元素。
为了更好地理解转换属性， 查看演示 。
| 默认值： | none |
|---|---|
| 遗传： | no |
| 动画： | yes. Read about animatable Try it |
| 版： | CSS3 |
| JavaScript语法： | object .style.transform="rotate(7deg)" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-，-moz-，或-O-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -O- |
| transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9 4.0 -webkit- |
句法
transform: none|transform-functions|initial|inherit;属性值
| 值 | 描述 | 播放 |
|---|---|---|
| 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 ) | 定义了一个三维平移，仅使用值的Z轴 | |
| scale( x,y ) | 定义一个2D缩放转换 | 播放 ” |
| scale3d( x,y,z ) | 定义一个3D缩放转换 | |
| scaleX( x ) | 通过赋予一个值X轴限定了尺度变换 | 播放 ” |
| scaleY( y ) | 通过给为Y轴的数值定义缩放转换 | 播放 ” |
| scaleZ( z ) | 通过给一个值的Z轴限定了三维尺度变换 | |
| rotate( angle ) | 限定了二维旋转，该角度在参数指定 | 播放 ” |
| 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轴的二维倾斜转换 | 播放 ” |
| skewY( angle ) | 限定沿Y轴的2D歪斜变换 | 播放 ” |
| perspective( n ) | 定义透视图的3D转换的元素 | |
| initial | 将此属性设置为默认值。 阅读关于初始 | |
| inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
扔在桌子上的图像
这个例子演示了如何创建"polaroid"照片和旋转照片。
相关页面
CSS教程： CSS 2D变换
CSS教程： CSS 3D变换
HTML DOM参考： transform property