csstransform

by bhupendra negi

HTML

<div class="showbox" style="transform: translate(3em,0);">box 1</div>
<div class="showbox" style="transform: rotate(30deg); border-color: red;">box 2</div>
<div class="showbox" style="transform: translate(-3em,1em);">box 3</div>
<div class="showbox" style="transform: scale(2);">box 4</div>
<div style="clear: left;"></div>


 <div class = "showbox slideright"> BOX </div>

CSS

.showbox {
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
  }

.slideright {
   -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;  
    background-color: green;  
    color:yellow;
    cursor:pointer;
    opacity: 0.4;
    
}

  .showbox.slideright:hover {
    -webkit-transform: translate(5em,0);
    -moz-transform: translate(5em,0);
    -o-transform: translate(5em,0);
    -ms-transform: translate(5em,0);
     transform: rotate(30deg) scale(1)  
   

    opacity: 1
  }