CSS3鼠标悬停开门动画特效

CSS3中透视perspective

透视原理： 近大远小 。

浏览器透视：把近大远小的所有图像，透视在屏幕上。

理解浏览器的坐标系：浏览器平面为 Z=0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

perspectiveOrigin: 个人理解为视点的xy坐标，perspective则是z坐标，三者可以再三维中确定 视点的唯一位置。

perspective有两种定义方式，如下

.box{

  perspective: 500px;

}

.box{

  transform: prespective(500px)

}

个人关于两种书写方式的不同的理解是，

单独定义的perspective只在初次渲染时，投影在屏幕上。

写在transform中的perspective会根据transform动画的变化来进行重新的渲染。

所以当使用js或Css3进行动画时，尽量选择后一种定义方式。

使用的注意事项

perspective的定义要在其他3d变幻之前，否则无效 如translateZ等，这个也很好理解，要首先确定眼睛所在的位置，在屏幕上的成像才会有此计算。

呈现3d效果的父元素要添加transform-style：preserver-3d属性。该属性定义该元素的子元素按照3d效果来呈现。

backface-visibility 用来定义元素不是正面朝向视点时的可视情况 。

transform-origin设置旋转元素的基点位置

transform-origin: x-axis y-axis z-axis;

x-axis定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%

y-axis定义视图被置于 Y 轴的何处。可能的值：left、center、right、length、%

z-axis定义视图被置于 Z 轴的何处。可能的值：length

html:

    <div class="door">
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .door{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid gray;
            background-image: url('./img/dog.gif');
            background-repeat: no-repeat;
            background-size: 100% auto;
            perspective: 500px;
        }
        .door>div{
            box-sizing: border-box;
            border: 1px solid #000;
        }
        .left,.right{
            float: left;
            width: 50%;
            height: 100%;
            background-color: brown;
            transition: all 1s;
            position: relative;
        }
        /* 设置左门的旋转基点 */
        .left{
            transform-origin: left center;
        }
        /* 设置右门的旋转基点 */
        .right{
            transform-origin: right center;
        }
        /* 绘制门上的小圆圈 */
        .left::before, .right::before{
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid whitesmoke;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-10px);
        }
        .left::before{
            right: 0;
        }
        .right::before{
            left: 0;
        }
        .door:hover .left{
            transform: rotateY(-130deg);
        }
        .door:hover .right{
            transform: rotateY(130deg);
        }
    </style>

注意：

鼠标悬停到.door盒子中的.left左侧盒子上的时候，和鼠标悬停到.door盒子中的.right右侧盒子上的时候，门旋转 沿着 Y轴旋转的几点位置：

关于原点位置的设置：

transform-origin属性含义

+