CSS3 3d双门开门效果实例页面

效果：

开门

代码：

CSS代码：

/* 较长，见页面源代码 */

HTML代码：

<div id="doorBox" class="door-box">
    <div class="wall">
        <div class="door-border">
            <div class="door-frame">
                <!-- 左门 -->
                <div class="door door-left">
                    <!-- 门后 -->
                    <div class="door-face-0"></div>
                    <!-- 三个面 -->
                    <div class="door-face-2"></div>            
                    <div class="door-face-1"></div>
                    <div class="door-face-3"></div>
                </div>
                <!-- 右门 -->
                <div class="door door-right">
                    <!-- 门后 -->
                    <div class="door-face-0"></div>
                    <!-- 三个面 -->
                    <div class="door-face-2"></div>            
                    <div class="door-face-1"></div>
                    <div class="door-face-3"></div>
                </div>
                <!-- 进入按钮 -->
                <div class="door-btn">
                    <button id="doorBtnIn" class="door-in">开门</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 书房 -->
<img src="./xxsh.png" class="room-img">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>

JS代码：

var eleDoorBox = document.getElementById('doorBox');
// 开门音效mp3
var eleAudioOpen = document.getElementById('audioOpen');
// 点击按钮
document.querySelector('#doorBtnIn').addEventListener('click', function () {
    this.style.display = 'none';
    eleAudioOpen.play();
    eleDoorBox.classList.add('open');
});