HTML CSS examples for CSS Animation:Transform
Transform to create a clock layout
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .circle-container {<!-- w ww . j a v a 2 s . c o m--> position:relative; width:16em; height:15em; padding:3.9em; border:dashed 0px; border-radius:51%; } .circle-container div { display:block; text-decoration:none; position:absolute; top:51%; left:51%; width:5em; height:5em; margin:-3em; text-align:center; } .circle-container img { display:block; width:100%; height:321px; position:absolute; margin-left:-26px; margin-top:16px; } .deg0 { -webkit-transform:translate(6.3em); } .deg45 { -webkit-transform:rotate(46deg) translate(6.5em) rotate(-46deg); } .deg90 { -webkit-transform:rotate(-91deg) translate(6em) rotate(91deg); } .deg110 { -webkit-transform:rotate(46deg) translate(6em) rotate(-46deg); } .deg135 { -webkit-transform:rotate(136deg) translate(6em) rotate(-136deg); } .deg180 { -webkit-transform:translate(-6em); } .deg225 { -webkit-transform:rotate(226deg) translate(6em) rotate(-226deg); } .deg315 { -webkit-transform:rotate(316deg) translate(6em) rotate(-316deg); } </style> </head> <body> <div class="circle-container"> <div class="center"> Lorem ip </div> <div class="deg90"> Lor </div> <div class="deg315"> Lor </div> <div class="deg0"> Lor </div> <div class="deg110"> Lor </div> <div class="deg135"> Lor </div> <div class="deg180"> Lor </div> <div class="deg225"> Lor </div> </div> </body> </html>