CSS3 rotateY 开门特效

写这篇文章的灵感来自于：瑞幸夏季推广活动页，打开冰箱领取优惠券。

瑞幸的活动页展示

rotateY() 实现开门特效

展示核心代码

<div class="container">
    <div class="door">
        冰箱
    </div>
</div>

 .door {
            width: 100px;
            height: 200px;
            background: coral;
            color: #fff;
            font-size: 22px;
            line-height: 200px;
            text-align: center;
            /*以门的最左侧为旋转轴*/ 
            transform-origin: left; 
            transform: rotateY(0);
            transition: all 1s linear;
        }

        .door:hover {
            /*绕着Y轴 逆时针旋转*/ 
            transform: rotateY(-160deg); 
        }

具体的实现代码：请跳链接github.com/stevenwujia…