Shulou(Shulou.com)06/02 Report--

This article mainly introduces how css3 realizes the rotation zoom animation effect, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Methods: 1. Use the "element {animation: name time}" statement to bind rotation and scaling animation to the element;2. Use the "@keyframes name {100%{transform:rotate(rotation angle) scale(scaling);}}" statement to realize rotation and scaling animation effect.

Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.

In css, you can use the animation attribute to bind rotation and scaling animations to elements.

Use @keyframes rule to set animation action keyframes of elements, use transform attribute to set element rotation action with rotate() function, and use transform attribute to set element scaling action with scale() function.

Examples are as follows:

Document .div1{ width:100px; height:100px; background:pink; margin:0 auto; animation:fadenum 5s;}@keyframes fadenum{ 100%{transform:rotate(180deg) scale(0.5,0.5);}} This is a rotation scaling effect

Output:

Thank you for reading this article carefully. I hope that the article "how to realize the rotation and zoom animation effect of css3" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support it a lot. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.