transform 3D Demo

by ken tsai

HTML

<div class="container">
<div id="div1"><!-- perspective -->
  <div id="div2">3D</div><!-- transform -->
</div>
</div>

CSS

.container{
  withd:500px
  text-align:center;
  padding-top : 200px;
  padding-left: 100px;
}
#div1{
  background:black;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  /* 這個很重要 */
  perspective:200px;

}

#div2{
  background:red;
  width: 100px;
  height: 100px;
  opacity: 0.5;
 
}

#div2:hover{

-webkit-transform: rotateX(45deg)  ;
transform: rotateX(45deg) ;
/* -webkit-transform: rotateY(290deg); */
/* -moz-transform: rotateX(290deg);
-moz-transform: rotateY(290deg); */


}