css3 cube animation

css3 cube animation.markdown

css3 cube animation

test css3 3d animation

A Pen by Heaven on CodePen.

License.

index.html

<div class="container">
  <div class="cube">
    <div class="slide one">one</div>
    <div class="slide two">two</div>
    <div class="slide three">three</div>
    <div class="slide four">four</div>
  </div>
</div>

style.css

*{
  padding:0;
  margin:0;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 100px;
  perspective: 400px;
}

.cube {
  height: 200px;
  animation-name: rotating;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-style: preserve-3d;
  transform:translateZ(0);
}

.slide {
  position: absolute;
  left: 100px;
  top: 0;
  width: 200px;
  height: 200px;
  background-color: rgba(192, 192, 192, 0.8);
  border: 2px solid #888;
  font-size: 24px;
  color: #222;
  text-align: center;
  text-shadow: 0px 2px 1px white;
}

.slide.one {
  transform: rotateY(0deg) translateZ(100px);
}
.slide.two{
  transform:rotateY(90deg) translateZ(100px);
}
.slide.three{
  transform:rotateY(180deg) translateZ(100px);
}
.slide.four{
  transform: rotateY(270deg) translateZ(100px);
}

@keyframes rotating {
  from { transform:rotateY(0);  }
  to { transform:rotateY(360deg); }
}