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属性含义
+
