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

Installation and use of Ubuntu 18.04 Server version (picture and text)

1 System Installation Steps OS Version:1804 Image...

How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter

1. Environment version Docker version 19.03.12 ce...

How to use mysql to complete the data generation in excel

Excel is the most commonly used tool for data ana...

5 Ways to Send Emails in Linux Command Line (Recommended)

When you need to create an email in a shell scrip...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

Solve the problem that the IP address obtained using nginx is 127.0.0.1

Get ip tool import lombok.extern.slf4j.Slf4j; imp...

XHTML Getting Started Tutorial: Using the Frame Tag

<br />The frame structure allows several web...

How to implement parallel downloading of large files in JavaScript

Table of contents 1. HTTP Range Request 1.1 Range...

How to add automatic completion commands for docker and kubectl on Mac

Introduction to kubectl kubectl is a command line...

How to solve the Mysql transaction operation failure

How to solve the Mysql transaction operation fail...

MySQL database terminal - common operation command codes

Table of contents 1. Add users 2. Change the user...

Implementation of Vue counter

Table of contents 1. Implementation of counter 2....

How to Fix File System Errors in Linux Using ‘fsck’

Preface The file system is responsible for organi...

mysql 5.7.18 winx64 free installation configuration method

1. Download 2. Decompression 3. Add the path envi...