2D和3D效果

<style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color:#aaa;
            color: #fa2222;
        }
        #div1:hover{
            transform:rotateY(90deg);
            transition: transform 1s;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color:#444;
            color: #fafafa;
        }
    </style>
 <style type="text/css">

 #div1{

 width: 200px;

 height: 200px;

 background-color:#aaa;

 color: #fa2222;

 }

 #div1:hover{

 transform:rotateY(90deg);

 transition: transform 1s;

 }

 #div2{

 width: 200px;

 height: 200px;

 background-color:#444;

 color: #fafafa;

}

</style>