Understanding the CSS transform-origin property

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.

<<:  Vue uses vue meta info to set the title and meta information of each page

>>:  Example code for implementing auto-increment sequence in mysql

Recommend

How to install golang under linux

Go is an open source programming language that ma...

Build nginx virtual host based on domain name, port and IP

There are three types of virtual hosts supported ...

How MySQL supports billions of traffic

Table of contents 1 Master-slave read-write separ...

Detailed Introduction to Nginx Installation and Configuration Rules

Table of contents 1. Installation and operation o...

The whole process of configuring hive metadata to MySQL

In the hive installation directory, enter the con...

Graphic tutorial on installing CentOS7 on VMware 15.5

1. Create a new virtual machine in VMware 15.5 1....

js and jquery to achieve tab status bar switching effect

Today we will make a simple case, using js and jq...

Comparative Analysis of IN and Exists in MySQL Statements

Background Recently, when writing SQL statements,...

Definition and function of zoom:1 attribute in CSS

Today I was asked what the zoom attribute in CSS ...

IE8 compatibility notes I encountered

1. IE8's getElementById only supports id, not ...

How to solve the DOS window garbled problem in MySQL

The garbled code problem is as follows: The reaso...

Detailed explanation of the use of various MySQL indexes

1. Slow query log 1.1 MySQL log types Logs are us...

Web standards learning to understand the separation of structure and presentation

When discussing Web standards, one thing that alwa...

How to implement the strategy pattern in Javascript

Table of contents Overview Code Implementation Su...