在展示代码之前。先解释一下运用到的属性：
(1) perspective属性
perspective属性设置镜头(视点)到元素平面的距离，以像素计。所有元素都是放置在z=0的平面上。比如perspective:300px 表示镜头距离元素表面的位置是300像素。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。也就是某元素想获得透视效果，需要在一个拥有perspective属性的父元素才能显现3D的效果。
以下代码显示的是有无perspective时正方形旋转效果的区别。
HTML：
<!-- 第一个正方形 -->
<div class="one_father">
<div class="one_son"></div>
</div>
<!-- 第二个正方形 -->
<div class="two_father">
<div class="two_son"></div>
</div>CSS：
/* 第一个正方形 */
.one_father{
width: 200px;
height: 200px;
background: #eee;
margin: 100px auto;
}
.one_son{
width: 100%;
height: 100%;
background: pink;
transform: rotateY(50deg);
transition: all 0.5s;
}
.one_father:hover .one_son{
transform: rotateY(-130deg);
}
/* 第二个正方形 */
.two_father{
width: 200px;
height: 200px;
margin: 20px auto;
background: #eee;
perspective: 900px;
}
.two_son{
width: 100%;
height: 100%;
background: pink;
transform: rotateY(50deg);
transition: all 0.5s;
}
.two_father:hover .two_son{
transform: rotateY(-130deg);
}左边是第一个正方形，右边为第二个正方形。
透视原理：远小近大
当元素沿着Z轴向前移动的时候，与视点的距离越小，放大倍数越大。
当元素沿着Z轴移动的距离大于或等于视距后,元素移动到视点后方，固无法投影在屏幕上，所以屏幕上没有呈现。
translateZ>perspective 屏幕上无法呈现图像。
在以上代码中，基本已经完成了让门旋转的效果，还差最后一步让门按照一个参照点旋转，基本就完成了。
“参照点”属性：
(2) transform-origin
transform-origin属性指定元素的中心点在哪，用来设置元素的运动的基点（参照点）。
主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置。
换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的
transform-origin(X,Y)：X是水平方向取值,Y是垂直方向的取值，其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom
left,center right对应的百分值为left=0%;center=50%;right=100%;top center bottom对应的百分值为top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。
在以上的代码中，修改第二个正方形的CSS为：
.two_son{
width: 100%;
height: 100%;
background: pink;
transition: all 0.5s;
transform-origin: left center;
}这样，单门开门效果就完成了。
想要双门开门效果代码也是一样的道理。如下：
HTML：
<!-- 开门 -->
<div class="door">
<div class="left"></div>
<div class="right"></div>
</div>
CSS：
/* 开门 */
.door{
width: 550px;
height: 300px;
margin: 150px auto;
perspective: 1200px;
position: relative;
border: 1px solid;
transition: all 1s;
}
.left,.right {
float: left;
width: 50%;
height: 100%;
background-color: blue;
opacity: 0.1;
transition: 1s;
position: relative;
}
.left{
/* 旋转中心点变成是左边、上下居中的那个位置 */
transform-origin: left center;
}
.right{
transform-origin: right center;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}显示效果：
这样，开门效果就完成了！本人较懒，做出的效果比较简单，各位看客想运用好这个效果，可以在door的这个div里添加背景图片，也可以在左右门里添加好看的样式等。
