HTML CSS examples for CSS Animation:Rotate
Css3 transform rotate
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- www . j a v a 2 s. c o m--> background:blue; height:51px; width:201px; margin:21px; color:Chartreuse; } .rotated30 { -webkit-transform:rotateY(31deg); -moz-transform:rotateY(31deg); -o-transform:rotateY(31deg); -ms-transform:rotateY(31deg); transform:rotateY(31deg); } .rotated60 { -webkit-transform:rotateY(61deg); -moz-transform:rotateY(61deg); -o-transform:rotateY(61deg); -ms-transform:rotateY(61deg); transform:rotateY(61deg); } .rotated80 { -webkit-transform:rotateY(81deg); -moz-transform:rotateY(81deg); -o-transform:rotateY(81deg); -ms-transform:rotateY(81deg); transform:rotateY(81deg); } .rotated90 { -webkit-transform:rotateY(91deg); -moz-transform:rotateY(91deg); -o-transform:rotateY(91deg); -ms-transform:rotateY(91deg); transform:rotateY(91deg); } </style> </head> <body> <div class="notRotated"> Lorem ipsum d </div> <div class="rotated30"> Lorem ipsum dolor s </div> <div class="rotated60"> Lorem ipsum dolor s </div> <div class="rotated80"> Lorem ipsum dolor s </div> <div class="rotated90"> Lorem ipsum dolor s </div> </body> </html>