HTML CSS examples for CSS Property:transform
CSS transform and rotate with animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @-webkit-keyframes spinner {<!-- w w w .j a v a 2s. co m--> from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); } } #spinner { -webkit-transform-origin: 150px 0 0; -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; -webkit-transform-style: preserve-3d; -moz-transform-origin: 150px 0 0; -moz-animation-name: spinner; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-duration: 6s; -moz-transform-style: preserve-3d; padding:50px; position: absolute; border: 1px solid black; background-color: red; } #spinner:hover { -webkit-animation-play-state: paused; } </style> </head> <body> <div id="stage"> <div id="spinner"> hello </div> </div> </body> </html>