CSS3 transform property

 The function of the CSS3 transform property provides a breakthrough in the special effects of web page element (element) deformation in web design. Through the CSS3 transform property, web designers can easily make web page elements show rotation (rotate) and zoom (scale) The special effects of, move (move) and skew (skew) enable the effects that need to be achieved through drawing software in traditional web design to be quickly achieved through the CSS3 transform property.

However, the CSS3 transform property also has a small disadvantage, that is, it can’t be used too much at once, because the CSS3 transform property works by allowing the browser to automatically calculate the position of each element, perform mathematical function calculations, and then show the effect of change. So if you use too much in the same page at one time, it will cause the browsing to get stuck, but this problem should become less and less obvious in the future. After all, the processing speed of the computer is also improving, and the CSS3 transform property should be obtained in the future. Used extensively.

CSS3 transform property syntax

transform: transform-function;

The transform property of CSS has a parameter transform-function that can be used. This parameter has many different changes, and it is not arbitrarily set. CSS3 has specific parameters that can be applied. This is the main setting method to deform webpage elements. We organize the parameters in the table below.

CSS3 transform property common special effect parameter table

Program	parameter	Description
Conversion	translate(x,y)	Perform 2D conversion effects from the reference point, move x distance to the x axis, and move y distance to the Y axis.
Conversion	translate3d(x,y,z)	Perform 3D conversion effects from reference points.
Conversion	translateX(x)	Define the 2D transformation of the X axis direction.
Conversion	translateY(y)	Define the 2D transformation of the Y axis direction.
Conversion	translateZ(z)	Define the 3D transformation of the Z axis direction.
Zoom	scale(x,y)	2D zooming effects are performed from the reference point, the X-axis direction zooms x times, and the Y-axis direction zooms y times.
Zoom	scale3d(x,y,z)	Perform 3D zooming effects from reference points.
Zoom	scaleX(x)	Define the 2D zoom in the X axis direction.
Zoom	scaleY(y)	Define the 2D zoom in the Y axis direction.
Zoom	scaleZ(z)	Define the 2D zoom in the Z-axis direction.
Spin	rotate(angle)	According to the set angle, 2D rotation takes the reference point as the central axis.
Spin	rotate3d(x,y,z,angle)	According to the set angle, take the reference point as the central axis for 3D rotation.
Spin	rotateX(angle)	The angle set by 3D rotation along the X axis.
Spin	rotateY(angle)	The angle set by the 3D rotation along the Y axis.
Spin	rotateZ(angle)	The angle set by the 3D rotation along the Z axis.
tilt	skew(x,y)	With the reference point as the center, tilt x degrees along the X axis and y degrees along the Y axis.
tilt	skewX (angle)	Take the reference point as the center and incline x degrees along the X axis.
tilt	skewY (angle)	Take the reference point as the center and tilt y degrees along the Y axis.
matrix	matrix (6 values)	Use 6 value settings for 2D matrix changes, such as transform:matrix(0,0,0,0,0,0).
matrix	matrix3d ​​(16 values)	Use 16 value settings for 3D matrix changes.

In order to get good browser support, you must use the browser front

• -moz-transform: suitable for firefox browser.
• -webkit-transform: Suitable for browsers such as safari, google chrome, opera, etc.
• -o-transform: applicable to opera browser.
• -ms-transform: suitable for ie browsers.

Example of CSS3 transform property 1. Transformation effect

<style type="text/css">
#test_translate_0{
    width:300px;
    height:50px;
    background-color:yellow;
}    
#test_translate_1{
    width:300px;
    height:50px;
    background-color:red;
    transform:translate(22px ,14px);
    -moz-transform:translate(22px,14px);
    -webkit-transform:translate(22px,14px);
    -o-transform:translate(22px,14px);
    -ms-transform:translate(22px,14px) );
    transform:translate(22px,14px);
}    
#test_translate_2{
    width:300px;
    height:50px;
    background-color:blue;
    transform:translate(6px,3px);
    -moz-transform:translate(6px,3px);
    -webkit-transform:translate(6px,3px);
    -o-transform:translate(6px,3px);
    -ms-transform:translate(6px,3px);
    transform: translate(6px,3px);
}    
</style>
<div id="test_translate_0">Do not convert blocks by default</div>
<div id="test_translate_1">The first conversion block</div>
<div id="test_translate_2">The second conversion block</div>

Example effect

Blocks are not converted by default

The first conversion block

Second conversion block

The red and blue DIV blocks in Example 1 are converted to the X-axis and Y-axis directions respectively, and it feels like they are moving positions.

CSS3 transform property example two, zoom (scale) deformation effects

<style type="text/css">
#test_scale_0{
    width:300px;
    height:50px;
    background-color:yellow;
    margin-bottom:22px;
}    
#test_scale_1{
    width:300px;
    height:50px;
    background-color:red ;
    -moz-transform:scale(1,1.5);
    -webkit-transform:scale(1,1.5);
    -o-transform:scale(1,1.5);
    -ms-transform:scale(1,1.5);
    transform :scale(1,1.5);
}   
</style>
<div id="test_scale_0">Original non-scaled block</div>
<div id="test_scale_1">Use zooming effect block</div>

Example effect

Original unscaled block

Use zoom effect block

In the second example, the red DIV block is enlarged in the Y-axis direction, and the text in the block is also deformed by the enlargement effect.

Example of CSS3 transform property 3. Deformation effects of rotate

<style type="text/css">
#test_rotate_0{
width:300px;
height:50px;
background-color:yellow;
}    
#test_rotate_1{
width:300px;
height:50px;
background-color:red;
-moz-transform: rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
}    
#test_rotate_2{
width:300px;
height:50px;
background-color:blue;
-moz-transform:rotate(-2deg);
-webkit-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate( -2deg);
transform:rotate(-2deg);
}    
</style>
<div id="test_rotate_0">The block is not rotated by default</div>
<div id="test_rotate_1">The first rotating block</div>
<div id="test_rotate_2">The second rotating block </div>

Example effect

Blocks are not rotated by default

The first rotating block

Second rotating block

In Example 3, the red and blue DIV blocks are rotated, but the rotation angles of the two blocks are not the same, so the interlacing effect is shown, and the text in the block is also rotated and deformed. If you continue to adjust the angle, the two The rotation effect of each block will be more obvious.

CSS3 transform property example four, skew deformation effects

<style type="text/css">
#test_skew_0{
    width:300px;
    height:50px;
    background-color:yellow;
    margin-bottom:22px;
}    
#test_skew_1{
    width:300px;
    height:50px;
    background-color:red ;
    -moz-transform:skew(5deg,5deg);
    -webkit-transform:skew(5deg,5deg);
    -o-transform:skew(5deg,5deg);
    -ms-transform:skew(5deg,5deg);
    transform :skew(5deg,5deg);
}  
#test_skew_2{
    width:300px;
    height:50px;
    background-color:blue;
    -moz-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
    -o -transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
}
</style>
<div id="test_skew_0">Original non-skewed block</div>
<div id="test_skew_1">第A slanted block</div>
<div id="test_skew_2">The second slanted block</div>

Example effect

Original non-tilted block

The first tilted block

Second tilted block

Example 4 Let the red DIV block be tilted by 5 degrees in the X-axis direction and Y-axis direction, and the blue DIV block will be tilted by -20 degrees in the X direction. If you continue to adjust the tilt angle, the tilt effect It will be more obvious that the text in the block also produces a distorted visual effect following the tilt effect.

➠If you want to modify the reference point of rotation or tilt, it is the perfect solution to match with " CSS3 transform-origin property ".