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>