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 屬性。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM