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

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.

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

Responsive Footer Design using HTML, CSS & Bootstrap

Today, I am going to show you how to create a footer design using HTML, CSS and bootstrap. This is a Complete Responsive Footer Design.

HTML Tutorial For Beginners

In this article, we’ll tutorial the best ways for learning HTML to assist you on your programming journey.

Neumorphism Card Design using HTML and CSS | Pure CSS Card

Let's design a card with Neumorphism UI using pure HTML and CSS code.

Menu Design using HTML and CSS | Tile Menu using HTML and CSS

Let's code a simple and best looking menu tiles using HTML and CSS