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
1 System Installation Steps OS Version:1804 Image...
1. Environment version Docker version 19.03.12 ce...
introduction Today I learned how to connect to th...
Excel is the most commonly used tool for data ana...
When you need to create an email in a shell scrip...
The meta tag is used to define file information an...
Get ip tool import lombok.extern.slf4j.Slf4j; imp...
<br />The frame structure allows several web...
Table of contents 1. HTTP Range Request 1.1 Range...
Introduction to kubectl kubectl is a command line...
How to solve the Mysql transaction operation fail...
Table of contents 1. Add users 2. Change the user...
Table of contents 1. Implementation of counter 2....
Preface The file system is responsible for organi...
1. Download 2. Decompression 3. Add the path envi...