css transform property


  Translation results：

transform

UK[trænsˈfɔ:m] US[trænsˈfɔ:rm]

vt.Transform; change; change

vi.Change

n.[Number] Transformation

css transform propertysyntax

Function:The transform attribute applies 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element. To better understand the transform property, check out this demo.

Syntax: transform: none|transform-functions

Description: none defines no conversion. matrix(n,n,n,n,n,n) defines a 2D transformation, using a matrix of six values. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) defines a 3D transformation, using a 4x4 matrix of 16 values. translate(x,y) defines a 2D transformation. translate3d(x,y,z) defines 3D transformation. translateX(x) defines the transformation, using only the X-axis value. translateY(y) defines the transformation, using only the Y-axis value. translateZ(z) defines a 3D translation, using only the Z-axis value. scale(x,y) defines the 2D scaling transformation. scale3d(x,y,z) defines the 3D scaling transformation. scaleX(x) Defines the scaling transformation by setting the value of the X axis. scaleY(y) defines the scaling transformation by setting the value of the Y axis. scaleZ(z) Defines the 3D scaling transformation by setting the value of the Z axis. Rotate(angle) Defines 2D rotation, specifying the angle in the parameter. rotate3d(x,y,z,angle) defines 3D rotation. rotateX(angle) defines a 3D rotation along the X-axis. rotateY(angle) defines a 3D rotation along the Y axis. rotateZ(angle) defines a 3D rotation along the Z axis. skew(x-angle,y-angle) defines a 2D skew transformation along the X and Y axes. skewX(angle) defines a 2D skew transformation along the X-axis. skewY(angle) defines the 2D skew transformation along the Y axis. perspective(n) Defines the perspective view for the 3D transform element.​

Note: Internet Explorer 10, Firefox, and Opera support the transform attribute. Internet Explorer 9 supports an alternative -ms-transform property (for 2D transforms only). Safari and Chrome support alternative -webkit-transform properties (3D and 2D transformations). Opera only supports 2D conversion.

css transform propertyexample

<!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>

Run instance »

Click the "Run instance" button to view the online instance

Popular Recommendations

Home

Videos

Q&A

submit