transform

英 [trænsˈfɔ:m]   美 [trænsˈfɔ:rm]  

vt.变换;改变;改观

vi.改变

n.[数]变换式

css transform属性 语法

作用:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性,请查看这个演示。

语法: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 转换元素定义透视视图。    

注释:Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转换。

css transform属性 示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例