css实现3d翻转效果

直接看代码！

.outbox{
    perspective:300px;		/* 脱离平面屏幕束缚，元素离观察者眼睛的距离, 只能用在3d动画 */
    -webkit-perspective:300px;
 }
 .inner{
    transform-style: preserve-3d;	/* 动画方式 3d */
    -webkit-transform-style: preserve-3d;
    transition: 1s ease-in-out;  /* 运动速度，变速运动 */

    position: relative;
    margin: 100px auto;
    height: 300px;
    width: 100px;
  }
  .inner:hover{
    -webkit-transform: rotateY(0.5turn);	/*  y轴 旋转180度 半圈 */
            transform: rotateY(0.5turn);
  }
  .front,.back{
    backface-visibility:hidden; /* 隐藏背部元素 */
    -webkit-backface-visibility:hidden;	
    -moz-backface-visibility:hidden; 	
    -ms-backface-visibility:hidden; 
    
    top: 0;
    left: 0;
    position: absolute;
	height: 100%;
    width: 100%;
  }
  .front{
    background-color: red;
  }
  .back{
    transform:rotateY(0.5turn);  /* 旋转到背部 */
    background-color: aquamarine;
  }

<div class="outbox">
   <div class="inner">
     <div class="front"></div>
     <div class="back"></div>
   </div>
 </div>