Home >Web Front-end >CSS Tutorial >How to achieve css3 image rotation? How to achieve image rotation animation effect in css3

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

不言Original: 2018-09-12 14:24:4010947browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set border color gradient in css3? Two implementation methods of css3 border color gradientNext article：How to set border color gradient in css3? Two implementation methods of css3 border color gradient

See more

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

Related articles