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-2022 CODEPRJ.COM