How to achieve css3 image rotation? How to achieve image rotation animation effect in css3-CSS Tutorial-php.cn

How to achieve css3 image rotation? How to achieve image rotation animation effect in css3

不言

Release： 2018-09-12 14:24:40

Original

10796 people have browsed it

In web pages, we can often see a picture rotating. How is such picture rotation achieved? This article will introduce to you the method of realizing image rotation animation effect in CSS3.

Rotation of images in css3 can be accomplished using a combination of -webkit-animation and @-webkit-keyframes.

-webkit-animation is a composite attribute, defined as follows:

-webkit-animation: name duration timing-function delay iteration_count direction;

name: is a method that needs to be specified in @-webkit-keyframes to perform animation.

duration: The duration of animation execution in one cycle.

timing-function: The effect of animation execution can be linear, or it can be "fast in and slow out", etc.

delay: The duration of animation delay execution.

iteration_count: The number of times the animation loop is executed. If it is infinite, it will be executed infinitely.

direction: animation execution direction.

@-webkit-keyframes The two attributes from and to specify the initial value and end value of animation execution.

-webkit-animation-play-state:paused; Pauses the execution of animation.

After understanding the attribute values used in css3 to implement image rotation, let’s look directly at the code for css3 to implement image rotation animation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>transform</title>
  <style>
    #loader {
        display: block;
        position: relative;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
  </style>
 </head>
 <body>
  <div id="test" >
　　<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />  
  </div>
 </body>
</html>

Copy after login

This article ends here , for more animation properties in css3, please refer to css3 Learning Manual.

Related recommendations:

CSS3 realizes picture enlargement and rotation_html/css_WEB-ITnose

How to make pictures not realize in css3 The effect of stopping rotation? 【Detailed explanation】

The above is the detailed content of How to achieve css3 image rotation? How to achieve image rotation animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!