CSS3 Transition - Rotating Square

by Leespiker

HTML

<div class="wrapper">
  <div class="test">
    <div class="top-half">
      test
    </div>
    <div class="bottom-half">
    </div>
  </div>
</div>

CSS

.test{
    height:100px;
    width:100px;
    background:#ccc;
    -webkit-animation: burst_spin 3s infinite linear;
}

@-webkit-keyframes burst_spin {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform: rotateY(360deg); }
}

.wrapper {
  background-color: red;
  height: 100px;
  width: 100px;
}

.top-half {
  backface-visibility: hidden;
}

.bottom-half {
  backface-visibility: hidden;
}