css3 transform旋轉有3d效果

效果圖如下

 

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                position: relative;
                height: 300px;
                width: 300px;
                margin: 200px auto;
                perspective:500;
                -webkit-perspective:500;
            }
            
            .box01{
                background: #009688;
                width: 300px;
                height: 300px;
                transition: all 0.5s ease-in;
                -webkit-transition: all 0.5s ease-in;
                position: absolute;
                left: 0;
                top: 0;
            }
            
            .box:hover .box01{
                transform: rotateY(-90deg);
                -webkit-transform: rotateY(-90deg);
                opacity: 0;
            }
            
            .box02{
                background: red;
                width: 300px;
                height: 300px;
                transition: all 0.5s ease-in;
                -webkit-transition: all 0.5s ease-in;
                position: absolute;
                left: 0;
                top: 0;
                transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg);
                opacity: 0;
            }
            
            .box:hover .box02{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box01">
                
            </div>
            <div class="box02">
                
            </div>
        </div>
    </body>
</html>

 

過渡旋轉使用的是rotate(),要有透視效果的屬性是perspective（就是近大遠小，圖片會變成梯形） ，perspective 加給父盒子

使用perspective-origin可以改變效果位置，默認值為50% 50%；

 

perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

 

注：目前瀏覽器都不支持 perspective 屬性。

Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。