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

The main content of this article is to explain "how css makes the picture rotate and turn back". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how css makes the picture rotate and turn back".

Methods: 1, use "animation: name time" style to bind animation to picture elements; 2, use "@ keyframes name {50% {transform:rotate (rotation angle value);}}" statement to set the animation action of picture rotation to achieve the effect of picture rotation and reverse.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How does css make the picture rotate and reverse?

In css, you can use the animation attribute to make an element binding animation. The animation attribute can control the duration and frequency of the animation. The syntax is as follows:

Animation: name duration timing-function delay iteration-count direction

In css, you can use the animation attribute and the @ keyframes rule to achieve the animation of element scaling, and with the @ keyframes rule, you can create animation.

The principle of creating animation is to gradually change one set of CSS styles into another. You can change this CSS style many times during the animation process.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which is equivalent to 0 and 100%. 0% is the start time of the animation and the end time of 100% of the animation. For optimal browser support, you should always define 0% and 100% selectors.

Use the transform attribute with the rotate () function to animate the rotation.

Examples are as follows:

Document div {width:100px; height:100px; background-color:pink; overflow:hidden; animation:fadenum 5s;} @ keyframes fadenum {50% {transform:rotate (360deg);}}

Output result:

At this point, I believe you have a deeper understanding of "how css makes the picture rotate and turn back". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.