Flipping image how?

X

XenK2015-09-23 20:36:59

css

XenK, 2015-09-23 20:36:59

Flipping image how?

Actually, it is necessary to make the image constantly flipping 360, how can this be done with CSS?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Dmitry, 2015-09-23
@XenK

Rotation:

<!DOCTYPE html>
<html>
    <head>
        <title>Вращение картинки</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .rtimg{
                -webkit-animation: img 2s infinite linear;
                        animation: img 2s infinite linear;
              }
              @keyframes img {
                    0% {
                      -webkit-transform: rotate(0deg);
                              transform: rotate(0deg);
                    }
                    100% {
                      -webkit-transform: rotate(359deg);
                              transform: rotate(359deg);
                    }
                }
        </style>
    </head>
    <body>
        <img src="img_1.jpg" class="rtimg">
    </body>
</html>

don't forget to change the src of the picture))
More details:
www.w3schools.com/cSS/css3_animations.asp

Z

zooks, 2015-09-23
@zooks

You need to make the rotation on the hover state with CSS transition enabled.