Animation How to - Create Animation cube 3D

Question

We would like to know how to create Animation cube 3D.
Answer


<!--from  w w  w. j av a2 s. c  om-->
<p>
Revised from 
http://fiddle.jshell.net/htmlzengarden/K4xaY/show/light/
</p>

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-25deg) rotateY(25deg);
  -moz-transform: rotateX(-25deg) rotateY(25deg);
  -ms-transform: rotateX(-25deg) rotateY(25deg);
  -o-transform: rotateX(-25deg) rotateY(25deg);
  transform: rotateX(-25deg) rotateY(25deg);
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -ms-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

#cube span {
  width: 400px;
  height: 0;
  border-top: 1px dashed black;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
}

#y {
  -webkit-transform: rotateZ(-90deg);
  -moz-transform: rotateZ(-90deg);
  -ms-transform: rotateZ(-90deg);
  -o-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
}

#z {
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}

#cube div {
  width: 200px;
  height: 200px;
  opacity: 0.25;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -ms-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

#top {
  background-color: red;
}

#bottom {
  background-color: green;
}

#front {
  background-color: blue;
}

#back {
  background-color: yellow;
}

#left {
  background-color: orange;
}

#right {
  background-color: pink;
}

#top {
  -webkit-transform: rotateX(90deg) translateZ(100px);
  -moz-transform: rotateX(90deg) translateZ(100px);
  -ms-transform: rotateX(90deg) translateZ(100px);
  -o-transform: rotateX(90deg) translateZ(100px);
  transform: rotateX(90deg) translateZ(100px);
}

#bottom {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  -moz-transform: rotateX(-90deg) translateZ(100px);
  -ms-transform: rotateX(-90deg) translateZ(100px);
  -o-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
}

#front {
  -webkit-transform: rotateX(0deg) translateZ(100px);
  -moz-transform: rotateX(0deg) translateZ(100px);
  -ms-transform: rotateX(0deg) translateZ(100px);
  -o-transform: rotateX(0deg) translateZ(100px);
  transform: rotateX(0deg) translateZ(100px);
}

#back {
  -webkit-transform: rotateX(180deg) translateZ(100px);
  -moz-transform: rotateX(180deg) translateZ(100px);
  -ms-transform: rotateX(180deg) translateZ(100px);
  -o-transform: rotateX(180deg) translateZ(100px);
  transform: rotateX(180deg) translateZ(100px);
}

#left {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
  -moz-transform: rotateY(-90deg) translateZ(100px);
  -ms-transform: rotateY(-90deg) translateZ(100px);
  -o-transform: rotateY(-90deg) translateZ(100px);
  transform: rotateY(-90deg) translateZ(100px);
}

#right {
  -webkit-transform: rotateY(90deg) translateZ(100px);
  -moz-transform: rotateY(90deg) translateZ(100px);
  -ms-transform: rotateY(90deg) translateZ(100px);
  -o-transform: rotateY(90deg) translateZ(100px);
  transform: rotateY(90deg) translateZ(100px);
}

#cube:hover {
  -webkit-transform: rotateX(-25deg) rotateY(-25deg);
  -moz-transform: rotateX(-25deg) rotateY(-25deg);
  -ms-transform: rotateX(-25deg) rotateY(-25deg);
  -o-transform: rotateX(-25deg) rotateY(-25deg);
  transform: rotateX(-25deg) rotateY(-25deg);
}

#cube:hover div {
  opacity: 0.5;
}

#cube:hover #top {
  -webkit-transform: rotateX(90deg) translateZ(200px);
  -moz-transform: rotateX(90deg) translateZ(200px);
  -ms-transform: rotateX(90deg) translateZ(200px);
  -o-transform: rotateX(90deg) translateZ(200px);
  transform: rotateX(90deg) translateZ(200px);
}

#cube:hover #bottom {
  -webkit-transform: rotateX(-90deg) translateZ(200px);
  -moz-transform: rotateX(-90deg) translateZ(200px);
  -ms-transform: rotateX(-90deg) translateZ(200px);
  -o-transform: rotateX(-90deg) translateZ(200px);
  transform: rotateX(-90deg) translateZ(200px);
}

#cube:hover #front {
  -webkit-transform: rotateX(0deg) translateZ(200px);
  -moz-transform: rotateX(0deg) translateZ(200px);
  -ms-transform: rotateX(0deg) translateZ(200px);
  -o-transform: rotateX(0deg) translateZ(200px);
  transform: rotateX(0deg) translateZ(200px);
}

#cube:hover #back {
  -webkit-transform: rotateX(180deg) translateZ(200px);
  -moz-transform: rotateX(180deg) translateZ(200px);
  -ms-transform: rotateX(180deg) translateZ(200px);
  -o-transform: rotateX(180deg) translateZ(200px);
  transform: rotateX(180deg) translateZ(200px);
}

#cube:hover #left {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
  -moz-transform: rotateY(-90deg) translateZ(200px);
  -ms-transform: rotateY(-90deg) translateZ(200px);
  -o-transform: rotateY(-90deg) translateZ(200px);
  transform: rotateY(-90deg) translateZ(200px);
}

#cube:hover #right {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  -moz-transform: rotateY(90deg) translateZ(200px);
  -ms-transform: rotateY(90deg) translateZ(200px);
  -o-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}
</style>
</head>
<body>
  <div id="cube">
    <span id="x">X</span> <span id="y">Y</span> <span id="z">Z</span>
    <div id="top"></div>
    <div id="bottom"></div>
    <div id="front"></div>
    <div id="back"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
</html>
The code above is rendered as follows: