The rotate of CSS3 animation-animation

/* timer*/

. timer{width:240px; height:240px; background-color:transparent; box-shadow:inset 0px 0px 0px 2px #fff; border:2px #f XX solid; border-radius:50%; position:relative; MARGIN:38PX Auto; }

. Timer:after,. timer:before{position:absolute; Content: ""; Background-color: #fff; }

. timer:after{width:10px; height:2px; top:11px; left:11px;-webkit-transform-origin:1px 1px;-moz-transform-origin:1 PX 1px; transform-origin:1px 1px; -webkit-animation:minhand 2s linear infinite; -moz-animation:minhand 2s linear infinite; Animation:minhand 2s linear infinite; }

. timer:before{width:8px; height:2px; top:11px; left:11px;-webkit-transform-origin:1px 1px;-moz-transform-origin:1 PX 1px; transform-origin:1px 1px; -webkit-animation:hrhand 8s Linear infinite; -moz-animation:hrhand 8s Linear infinite; Animation:hrhand 8s Linear infinite; }

span.s1 {position:absolute;  top:120px;  left:120px;  width:60px; border-top:2px #0f0 Solid;  -webkit-transform-origin:left top;  -webkit-transition-delay:0; -webkit-animation:minhand 3s linear infinite; }

span.s2 {position:absolute;  top:120px;  left:120px;  width:0px;  height:80px;  border-left:2px #00f Solid;  -webkit-transform-origin:left top;  -webkit-transition-delay:0; -webkit-animation:hrhand 1s linear infinite; }

SPAN.S3 {position:absolute;  width:6px;  height:6px;  top:117px;  left:117px;  Background: #000;  border-radius:3px;  Text-align:center; Vertical-align:middle; }

@-webkit-keyframes minhand{

0%{-webkit-transform:rotate (0DEG)} 100%{-webkit-transform:rotate (360deg)}} @-moz-keyframes minhand{0%{- Moz-transform:rotate (0DEG)} 100%{-moz-transform:rotate (360deg)}} @keyframes minhand{0%{transform:rotate (0deg)} 100 %{transform:rotate (360DEG)}}

@-webkit-keyframes hrhand{0%{-webkit-transform:rotate (0deg)} 100%{-webkit-transform:rotate (360deg)}} @- Moz-keyframes hrhand{0%{-moz-transform:rotate (0deg)} 100%{-moz-transform:rotate (360deg)}} @keyframes hrhand{0%{ Transform:rotate (0DEG)} 100%{transform:rotate (360deg)}}

<!--time--

<div class= "Timer" >

<span class= "S1" ></span>

<span class= "S2" ></span>

<span class= "S3" ></span>

</div>

**************

Method of Transform

function	description
Matrix ( n , n , n , n , n , n )	defines a 2D conversion, using a matrix of six values.
Translate ( x , y )	to define 2D transformations, moving elements along the x and Y axes.
TranslateX ( n )	defines the 2D transformation, moving elements along the X-axis.
translatey ( n )	defines the 2D transformation, moving elements along the Y axis.
Scale ( x , y )	defines the 2D scaling transformation, changing the width and height of the element.
ScaleX ( n )	defines the 2D scaling transformation, changing the width of the element.
ScaleY ( n )	defines the 2D scaling transformation, changing the height of the element.
rotate ( angle )	defines the 2D rotation, which specifies the angle in the parameter.
skew ( x-angle , y-angle )	defines a 2D tilt transition along the x and Y axes.
skewx ( angle )	defines a 2D tilt transition along the X-axis.
skewy ( angle )	defines a 2D tilt transition along the Y-axis.

The rotate of CSS3 animation-animation