CSS 3D Transforms and Animations

1st. Setting up Keyframes

 

<style type="text/css"> 

@-webkit-keyframes spinner { 

 from { -webkit-transform: rotateY(0deg); 

} 

 to 

{ -webkit-transform: rotateY(-360deg); 

} 

} 

</style>

2nd. Setting the stage for our animation

 

<style type="text/css">

#stage { margin: 1em auto;

-webkit-perspective: 1200px; }

      </style>

<style type="text/css">

#spinner {

-webkit-animation-name: spinner;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

-webkit-animation-duration: 6s;

-webkit-transform-style: preserve-3d;

} #spinner:hover {

-webkit-animation-play-state: paused;

}

</style>

3. Spinning an element on the page

 <div id="stage" style="background: rgba(0,0,0,0.5);"> <p id="spinner" style="background: rgba(0,0,0,0.5); text-align: center; color: #fff;">Stop, I'm getting dizzy!</p> </div>