Understanding the CSS transform-origin property

Preface

I recently made a fireworks animation, which is an animation of fireworks dispersing. During the implementation of the animation, I got stuck mainly during the rotation of the fireworks. Later I found that it was mainly because I didn’t understand transform-origin property well enough. I specially found an example to practice and deepened my understanding of the property.

transform-origin effect

This property is used to change the origin of the element's deformation and is most commonly used in conjunction with rotation. The number of received parameters can be one, two or three. When it is two values, they represent the values ​​from the left side of the box model, such as transform-origin: 50px 50px; which means that the rotation center of the container becomes the upper left corner of the box model as the origin, and the X and Y axes rotate with a distance of 50px from the origin.

Drawing of the hour hand of a clock

The vertical bar in the middle is our initial setting, and the following ones are rotated based on it

  <div class="clock">
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
  </div>

As can be seen from the CSS code below, we set the rotation center to the (3,105)px of the first vertical line as the origin for rotation. The distance here is the value from the left side of the box model. Understanding this, you can write other hour hands, and then rotate them separately to get the hour hands. Because I didn't understand the relative position of the value here for calculation, I stepped on a lot of pitfalls.

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);
}

refer to

MDN

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.