How to Create Awesome Three Types of Image Rotate Animations Using CSS, HTML

In this video, you are going to learn how to create awesome three types of Image Rotate Animations using CSS Keyframes. You can use these animartions to do more creative works. First one is rotate image on mouse hover. When the cursor is on the image it will rotate the image. Second one is rotate the image infinite on mouse hover. When the cursor is on the image it will rotate the image infinite until the cursor our from the image. Third animation is always rotate the image. In this animation, the image is always rotated whether it is hover or not. So in this video you can learn all of this three types of animations using only HTML and CSS. Hope these animations will be helpful for you to do more creative works.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Rotate Animations</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <img class="rotate_01" src="settings-icon.png">
    <img class="rotate_02" src="settings-icon.png">
    <img class="rotate_03" src="settings-icon.png">

</body>
</html>

style.css


/*body background css*/
body{
    padding: 0;
    margin: 0;
    background: #8AF3F9;
    background-size: cover;
}

/*rotate image-01 css*/
.rotate_01{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -60px 0 0 -280px;
    -webkit-transition: -webkit-transform 1s;
}
.rotate_01:hover{
    -webkit-transform: rotate(360deg) translateZ(0);
}

/*rotate image-02 css*/
.rotate_02{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -60px 0 0 -60px;
}
.rotate_02:hover{
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/*rotate image-03 css*/
.rotate_03{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -60px 0 0 150px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/*use keyframes*/
@-webkit-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}
@keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}

#html #css