CSS3 transform 属性
旋转 div 元素：
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
点击尝试
属性定义及使用说明
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
| 默认值： |
none |
| 继承： |
no |
| 版本： |
CSS3 |
| JavaScript 语法： |
object.style.transform="rotate(7deg)" |
语法
transform: none|transform-functions;
| 值 |
描述 |
| 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) |
定义 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 转换元素定义透视视图。 |
CSS3 backface-visibility 属性
隐藏被旋转的 div 元素的背面：
div{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
点击尝试
定义和用法
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
| 默认值： |
visible |
| 继承性： |
no |
| 版本： |
CSS3 |
| JavaScript 语法： |
object.style.backfaceVisibility="hidden" |
语法
backface-visibility: visible|hidden;
| 值 |
描述 |
| visible |
背面是可见的。 |
| hidden |
背面是不可见的。 |
CSS3 transform-style 属性
让转换的子元素保留3D转换：
div{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
点击尝试
属性定义及使用说明
transform--style属性指定嵌套元素是怎样在三维空间中呈现。
注意： 使用此属性必须先使用transform属性.
transform--style属性
| 默认值： |
flat |
| 继承： |
no |
| 版本： |
CSS3 |
| JavaScript 语法： |
object.style.transformStyle="preserve-3d" |
语法
transform-style: flat|preserve-3d;
| 值 |
描述 |
| flat |
表示所有子元素在2D平面呈现。 |
| preserve-3d |
表示所有子元素在3D空间中呈现。 |
Comments | NOTHING