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 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 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
Go is an open source programming language that ma...
There are three types of virtual hosts supported ...
Table of contents 1 Master-slave read-write separ...
Table of contents 1. Installation and operation o...
In the hive installation directory, enter the con...
1. Create a new virtual machine in VMware 15.5 1....
Today we will make a simple case, using js and jq...
Background Recently, when writing SQL statements,...
Today I was asked what the zoom attribute in CSS ...
1. IE8's getElementById only supports id, not ...
The garbled code problem is as follows: The reaso...
Table of contents 1. Download JDK (take jdk1.8.0 ...
1. Slow query log 1.1 MySQL log types Logs are us...
When discussing Web standards, one thing that alwa...
Table of contents Overview Code Implementation Su...