Home > Article > Web Front-end > What properties does css3 transformation have?
There are 6 css3 transformation attributes: 1. transform; 2. transform-origin; 3. transform-style; 4. perspective; 5. perspective-origin; 6. backface-visibility.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS3 transformations can move, scale, rotate, lengthen or stretch elements.
css3 conversion properties (2D/3D conversion)
Description | CSS | |
---|---|---|
Elements suitable for 2D or 3D transformation | 3 | |
Allows you to change the transform element position | 3 | |
3D Specify how to nest elements in space | 3 | |
Specify how 3D elements are viewed in perspective | 3 | |
Specify the bottom position of the 3D element | 3 | |
Defines whether an element should be visible when not facing the screen | 3 |
<!DOCTYPE html> <html> <head> <meta name="charset" content="utf-8"/> <style type="text/css"> #rotate2D, #rotate3D { width: 80px; height: 70px; color: white; font-weight: bold; font-size: 15px; padding: 10px; float: left; margin-right: 50px; border-radius: 5px; border: 1px solid #000000; background: red; margin: 10px; transition:transform 2s; -webkit-transition:transform 2s; /* Safari */ } #rotate2D:hover{ transform: rotate(180deg); } #rotate3D:hover{ transform: rotateY(180deg); } </style> </head> <body> <div id="rotate2D">2D 转换</div> <div id="rotate3D">3D 转换</div> </body> </html>
Expand knowledge:
2D conversion methodDescription | |
---|---|
n,n,n,n,n ,n) | Define 2D transformation, using a matrix of six values.|
x,y) | Define a 2D transform that moves elements along the X and Y axes.|
n) | Define a 2D transformation that moves elements along the X-axis.|
n) | Define a 2D transformation that moves elements along the Y axis.|
x,y) | Define a 2D scaling transformation that changes the width and height of an element.|
n) | Define a 2D scaling transformation that changes the width of an element.|
n) | Define 2D scaling transformation to change the height of the element.|
angle) | Define 2D rotation, specify the angle in the parameter.|
x-angle,y-angle) | Define 2D skew transformation, along X and Y axis.|
angle) | Defines a 2D skew transformation, along the X-axis.|
angle) | Defines a 2D skew transformation, along the Y axis.
Description | |
---|---|
n,n,n,n,n,n, n,n,n,n,n,n ,n,n,n,n) | Define 3D transformation, using 16 values 4x4 matrix. |
x,y,z) | Define 3D transformation.|
x) | Define a 3D translation, using only the values used for the X-axis.|
y) | Define a 3D translation, using only the values used for the Y axis.|
z) | Define a 3D translation, using only the value used for the Z axis.|
x,y,z) | Define the 3D scaling transformation.|
x) | Defines a 3D scaling transformation, given an X-axis value.|
y) | Define the 3D scaling transformation by giving a Y-axis value.|
z) | Defines a 3D scaling transformation, given a Z-axis value.|
x,y,z,angle) | Define 3D rotation.|
angle) | Defines a 3D rotation along the X-axis.|
angle) | Defines a 3D rotation along the Y axis.|
angle) | Defines a 3D rotation along the Z axis.|
n) | Defines the perspective view of a 3D transformed element.
css video tutorial)
The above is the detailed content of What properties does css3 transformation have?. For more information, please follow other related articles on the PHP Chinese website!