Sass Css3 Flip effect

by Susan Delgado

HTML

<ul>
    <li>
        <div class='front'>1</div>
        <div class='back'>
            <img src="http://lorempixel.com/100/100/"/>
        </div>
    </li>
   <li>
        <div class='front'>2</div>
        <div class='back'>
            <img src="http://lorempixel.com/100/100/"/>
        </div>
    </li>
       <li>
        <div class='front'>3</div>
        <div class='back'>
            <img src="http://lorempixel.com/100/100/"/>
        </div>
    </li>
       <li>
        <div class='front'>4</div>
        <div class='back'>
            <img src="http://lorempixel.com/100/100/"/>
        </div>
    </li>
</ul>

SCSS

ul{
 -webkit-perspective: 600;
}li{
  width:100px;
  height:100px;

  float:left;
  list-style:none;
  margin-right:20px;
  margin-bottom:50px;
  position:relative;
  cursor:pointer;
  
  div{
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transition: all 1s;
    -webkit-backface-visibility:hidden;
  }
  &:hover .front{
     z-index:0;
     -webkit-transform: rotateY(-180deg); 
  }
  &:hover .back{
   -webkit-transform: rotateY(0); 
  }
}
.front{
  z-index:3;
  color:#000;
  text-align:center;
  line-height:100px;
  font-size:20px;
  background:#ccc;
}

.back{
 -webkit-transform: rotateY(180deg); 
}