Simple CSS Rotations

Created on April 25th, 2015

CSS Animations and CSS Rotations are so easy to perform. In this short video we'll walk you through creating simple css rotations. This is a beginner guide to CSS keyframes and transforms. Hover over the red square to see it rotate. This is the sample code used in the video: https://codepen.io/devdojo/pen/XbJXJB.

Below is the HTML you will add to your index.html:

<div id="block"></div>

And the CSS to perform the simple rotation:

#block{
  width:200px;
  height:200px;
  background:#ff0000;
}

#block:hover{
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}

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

Comments (0)