turn rotation transform value

by desandro

HTML

<div id="alpha" class="box">upside down</div>
<div id="beta" class="box">rotating</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.box {
  width: 200px;
  height: 100px;
  font-size: 40px;
  margin-bottom: 40px;
  color: white;
  background: hsla( 220, 100%, 30%, 0.5);
}

#alpha {
  -webkit-transform: rotate( 0.5turn );
     -moz-transform: rotate( 0.5turn );
       -o-transform: rotate( 0.5turn );
}

#beta {
  -webkit-animation: rotate1Turn 4s infinite;
}

@-webkit-keyframes rotate1Turn {
  from { -webkit-transform: rotate( 0turn ); }
  to   { -webkit-transform: rotate( 1turn ); }
}