开门特效（HTML+CSS）

在展示代码之前。先解释一下运用到的属性：

(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里添加背景图片，也可以在左右门里添加好看的样式等。