CSS3 transform-origin property

 CSS3 transform-origin is used to transform mix of properties, can be used to define the "setting has transform attribute page elements" basic rotational position, another argument is used to change the rotational position of the base point, because the transform attribute pre The set rotation base point position may not meet the designer’s requirements, so CSS3 introduced the transform-origin attribute to match, allowing web designers to easily adjust where to rotate. In order to achieve this function, CSS3 The transform-origin property can set the rotation position of the X axis, the Y axis, and even the rotation position of the Z axis. In other words, the CSS3 transform-origin property can handle 2D and 3D effects.

CSS3 transform-origin property syntax

transform-origin: x axis y axis z axis;

Please pay attention to the order of transform-origin attribute parameters, from left to right are X axis, Y axis and Z axis. The parameters that can be set are listed below:

• The X axis direction can be set: left, center, right, length or percentage.
• The Y axis direction can be set: left, center, right, length or percentage.
• Only the length can be set in the Z axis direction.
  

Then we apply the CSS3 transform-origin property to the example to see the effect.

CSS3 transform-origin property example

<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:rotate(13deg);
    -moz-transform-origin:24% 30%;
    -webkit-transform:rotate(13deg);
    -webkit-transform-origin:24% 30%;
    -o-transform: rotate(13deg);
    -o-transform-origin:24% 30%;
    -ms-transform:rotate(13deg);
    -ms-transform-origin:24% 30%;
    transform:rotate(13deg);
    transform-origin: 24% 30%;
} 
#test_skew_2{
    width:300px;
    height:50px;
    background-color:blue;
    -moz-transform:rotate(13deg);
    -moz-transform-origin:60% 350%;
    -webkit-transform:rotate(13deg);
    -webkit-transform -origin:60% 350%;
    -o-transform:rotate(13deg);
    -o-transform-origin:60% 350%;
    -ms-transform:rotate(13deg);
    -ms-transform-origin:60% 350 %;
    transform:rotate(13deg);
    transform-origin:60% 350%;
}
</style>
<div id="test_skew_0">Original non-skewed block</div>
<div id="test_skew_1">First Slanted block</div>
<div id="test_skew_2">the second slanted block</div>

Example output effect

Original non-rotating block

The first rotating block

Second rotating block

Is it interesting to see the actual effect? The original DIV block that will not be rotated, after the rotation effect is made through transform , the transform-origin attribute is used to change the preset rotation reference point to create the effect of two DIV blocks overlapping. The same technique is also used It can be used for other effects of transform , such as changing the reference point of the tilt.