CSS transform 2d and 3d

by ken tsai

HTML

<div class="container">
  <div class="box skew">
  trasnform 2D => skew
  </div>
  
   <div class="box scale">
  trasnform 2D => scale
  </div>
  
    <div class="box rotate">
  trasnform 2D => rotate
  </div>
  
  
    <div class="box translate">
  trasnform 2D => translate
  </div>
  
  <div class="box box-ani">
   box animation DEMO
  </div>
  
}
</div>

CSS

.container{
  width: 100%;
  margin: 5px;
  padding: 10px;
  text-aling:center;
}
.box{
  
  width: 100px;
  height: 100px;
  border: 2px solid #000;
}
.skew {
  transform:skew(35deg);
}
/* y變小 */
.scale {
  transform:scale(1,0.5);
 }
 .rotate {
  transform:rotate(45deg);
}
/* x,y變換 */
.translate {
  transform:translate(50px, 50px);
}

.box-ani:{
   border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box-ani:hover{
   background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}