What does the Transform-origin property in CSS do? The role of the Transform-origin attribute

This article introduces you to what is the Transform-origin attribute in CSS? Transform-origin properties of the role, there is a certain reference value, the need for friends can refer to, I hope to help you

A recent fireworks animation, is the fireworks scattered animation, in the implementation of the animation process, mainly in the fireworks spinning process stuck, and later found that the main transform-origin attribute understanding is not deep, specifically to find an example to practice, deepened the understanding of the attributes.

transform-originRole

This property is used to change the origin of the element's deformation and is generally used to match the rotation to the most. The receive parameters can be one, two, three. When two values represent the value of the left side of the distance box model, for example transform-origin: 50px 50px; , the center of rotation for the container changes to the upper left corner of the box model, and the x and Y axes are rotated at the origin point of 50px.

Drawing of the Clock hour

The middle bar is set for us at the beginning, and the back is rotated based on this.

  <p class= "Clock" >    <p class= "Hour" ></p>    <p class= "Hour" ></p>    <p class= "Hour" ></p>    <p class= "Hour" ></p>    <p class= "Hour" ></p>  </p>

As can be seen from the following CSS code, we set the rotation center for the first vertical bar (3,105) px for the origin of rotation, the distance is the distance box model to the left of the value, understand this, you can write the other hours, and then rotate each to get the hour hand. Because we do not understand where the value is calculated relative to which position, thus stepping on a lot of pits.

Css

. hour {  position:absolute;  left:105px;  width:6px;  height:50px;  Background-color: #000;  border-radius:6px;  -WEBKIT-TRANSFORM-ORIGIN:3PX 105px;           Transform-origin:3px 105px;}. Hour:nth-child (2) {  transform:rotate (45deg);}. Hour:nth-child (3) {  transform:rotate (90deg);}. Hour:nth-child (4) {  transform:rotate ( -45deg);}. Hour:nth-child (5) {  transform:rotate ( -90deg);}