CSS3 achieve open the door down effect

Open the door down the effect of the realization of the principle

1. Using css3the rotateproperty effect rotation effect
2. Using css3the transform-originproperty implementation door opening effect

First, the HTMLpage layout code

<section>
    <div class="door-left">
    </div>
    
    <div class="door-right">
    </div>
</section>
复制代码

Second, the CSSstyle code

Achieve about two doors effect, mainly used in the positioning mode, the positioning of the two right and left doors. The key effect of the rotation, the mouse passes over the box, rotateYrotating door effect can be realized.

    section {
        position: relative;
        width: 450px;
        height: 300px;
        border: 1px solid #000;
        margin: 100 auto;
        background: url(../img/animal.jpg) no-repeat;
        background-size: 100% 100%;
        perspective: 1000px; // 给父盒子添加透视效果，使其具有立体效果
    }
    
    .door-left,.door-right {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background: url(./door.jpg) no-repeat;
        background-size: 100% 100%;
        transition: all 1s; // 实现动画效果
    }
    
    .door-left {
        left: 0;
        border-right: 1px solid #000;
        transform-origin: left; // 左侧盒子，按左边翻转
    }
    
    .door-right {
        right: 0;
        border-left: 1px solid #000;
        transform-origin: right; // 右侧盒子，按右边翻转
    }
    <!---->伪元素设置开门的把手
    .door-left::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 50%;
        transform: translateY(-50%); // 设置把手垂直居中
    }
    
      .door-right::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 50%;
        transform: translateY(-50%); // 设置把手垂直居中
    }
    
    section:hover .door-left {
        transform: rotateY(-130deg);
    }
      section:hover .door-right {
        transform: rotateY(130deg);
    }
复制代码

Third, the effect when the door is closed

Fourth, the door opened effect

Source download

Source download