Simple CSS Rotations

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); }
}