In this simple Tutorial we will learn how to rotate any HTML Element using simple CSS. The vertical rotation of HTML Element using CSS can be used anywhere on a website or web page.
Table of Contents
HTML Code
I have made HTML file with simple HTML structure. I have made a div inside body tags with the class main-div. We will rotate this div using CSS but first we will change its look, which bring us to the CSS section of our Tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8" >
<title>Vertically Rotate HTML Element using CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-div">
</div>
</body>
</html>
CSS Code
In CSS file I have done some styling of our main div. I have used linear-gradient property of CSS to give my div two colors in 45 deg angle. This will help us to see the rotation clearly. I have used position property and margin property of CSS to align my main div in the center of page, both vertically and horizontally.
I have given it some width and height as well and used box-shadow property to give it some shadow.
CSS Animation Property
The key part of this Tutorial is where I used animation property of CSS to create a rotation animation which is used to rotate element vertically.
I have set animation-name to ver-rotate (you can name your animation anything you like), animation-duration to 5 seconds, animation-iteration-count to infinite (animation would play infinite times) and animation-timing-function to linear which specifies the speed of animation to be same, throughout the duration of animation.
CSS @Keyframes Rule
The other important thing to learn from this Tutorial is the CSS @Keyframes rule that I have used to control the animation key frames step by step. The @keyframes rule give more control over transitional periods of animation than CSS Transition Property.
The @Keyframes rule of CSS is to control animation over the duration of 5 seconds. For that I have used the transform property of CSS to rotate my main div along Y-axis. When the animation starts the position of my main div would be 0deg along Y-axis and at the end of animation the position of my main div would be 360deg along Y-axis.
.main-div
{
background-image: -webkit-linear-gradient(45deg, #111 50%, #f7c942 50%);
height: 200px;
width: 200px;
position: absolute;
left: 0;
right: 0;
bottom:0;
top:0;
margin: auto;
box-shadow: 0px 0px 10px 2px #000;
animation: ver-rotate 5s infinite linear;
}
@keyframes ver-rotate
{
from
{
transform: rotateY(0deg);
}
to
{
transform: rotateY(360deg);
}
}
Demo
Video Tutorial
Watch video tutorial and subscribe our Youtube Channel.