3D转换（位置）+过渡+透视

效果如图：

 

实现代码：

1.html：

    <div class="door">
        <div class="in"><div>
    </div>　

2.css：

设置父元素：

    .door{
            width:250px;
            height:170px;
            background-image:url(img/1.jpg);
            background-size:100% 100%;
            border:1px solid #000000;
            margin:100px auto;
            position:relative;
            perspective:1000px;
        }

设置子元素：

    .in{
            position:position;
            top:0;
            left:0;
            width:250px;
            height:170px;
            background-color:brown;
            transition:all 2s;
            transform-origin:top;
        }

3.鼠标点击时：

        .door:hover .in{
            transform:rotateX(120deg);
        }　

 

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .door{
            width:250px;
            height:170px;
            background-image:url(img/1.jpg);
            background-size:100% 100%;
            border:1px solid #000000;
            margin:100px auto;
            position:relative;
            perspective:1000px;
        }
        .in{
            position:position;
            top:0;
            left:0;
            width:250px;
            height:170px;
            background-color:brown;
            transition:all 2s;
            transform-origin:top;
        }
        .door:hover .in{
            transform:rotateX(120deg);
        }
        
    </style>
</head>

<body>
    <div class="door">
        <div class="in"><div>
    </div>
</body>

</html>
View Code

 

注意：

1.父元素设置为相对定位，子元素设置为绝对定位。perspective（透视）属性设置在父元素上，才可对子元素起作用。

2.需要给谁设置3D转换，那鼠标点击事件就把过渡属性及3D转换后的位置（top,right,bottm,left）设置在谁上面。

 

参考博客：https://www.cnblogs.com/Assist/p/9684982.html

posted @ 2018-09-29 16:30  苏小落  阅读(297)  评论(0)    收藏  举报