Home > Developer > Web Develop
Grammar:
transform:none| transform-functions;| value | Description |
|---|---|
| None | The definition does not convert. |
| Matrix (n,n,n,n,n,n) | Defines a 2D conversion, 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 conversion, using a 4x4 matrix of 16 values. |
| Translate (x,y) | Defines a 2D transformation. |
| Translate3d (x,y,z) | Defines a 3D transformation. |
| TranslateX (x) | Define the conversion, just with the value of the X-axis. |
| Translatey (y) | Define the conversion, just use the Y-axis value. |
| Translatez (z) | Defines a 3D conversion, just using the Z-axis value. |
| Scale (x[,y]?) | Defines a 2D scaling transformation. |
| Scale3d (x,y,z) | Defines a 3D scaling transformation. |
| ScaleX (x) | Define the zoom transformation by setting the value of the X-axis. |
| ScaleY (y) | Define the zoom transformation by setting the value of the Y-axis. |
| Scalez (z) | Define a 3D scaling transformation by setting the value of the Z-axis. |
| Rotate (angle) | Defines the 2D rotation, which specifies the angle in the parameter. |
| Rotate3d (x,y,z,angle) | Defines the 3D rotation. |
| Rotatex (angle) | Defines the 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 tilt transition along the X and Y axes. |
| SKEWX (angle) | Defines a 2D tilt transition along the X-axis. |
| Skewy (angle) | Defines a 2D tilt transition along the Y-axis. |
| Perspective (n) | Defines a Perspective view for 3D transformation elements. |
eg
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> examples </title>
<style>
Div
{
width:200px;
height:100px;
Background-color:yellow;
/* Rotate DIV */
Transform:rotate (7DEG);
-ms-transform:rotate (7DEG); /* IE 9 */
-webkit-transform:rotate (7DEG); /* Safari and Chrome */
}
</style>
<body>
<div>Hello</div>
</body>
CSS3 Transform Properties
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
