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