Howdy, this video is free to watch, but you need to login first :)
Login to Continue Watching4 minutes and 1 second
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); }
}
I can teach you to create your own Software as a Service. Click here to learn more!
Visit SAAS Adventure!
Share This Video: