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>