CSS3 3d鍙樻崲瀹炵幇鐨勫紑闂ㄦ晥鏋?鍗曢棬瀹炰緥椤甸潰
鍥炲埌鐩稿叧鏂囩珷 »鏁堟灉锛?/h3>
鎴戠殑涔︽埧
鎴戠殑涔︽埧

浠g爜锛?/h3>
CSS浠g爜锛?/h5>
.door-box {
max-width: 100%;
width: 375px; height: 628px;
margin: 40px auto;
background-color: #2a273c;
font-family: STHeiTi, SimHei;
overflow: hidden;
position: relative;
z-index: 1;
}
.door-box.active {
animation: flyIntoRoom 1s both;
}
.door-box div {
position: absolute;
}
.wall {
left: 0; top: 0; right: 0; bottom: 46px;
border-bottom: 3px solid #211820;
background-color: #768bb6;
max-height: calc(1.8 * (375px - 80px));
margin: auto;
box-shadow: 0 -200px #768bb6;
}
.door-border {
top: 28px;
left: 40px;
right: 40px;
bottom: 0;
border: 3px solid #211820;
border-radius: 2px 2px 0 0;
border-bottom: 0;
background-color: #183269;
}
.door-frame {
top: 10px; left: 9px; right: 9px; bottom: 0;
border: 3px solid #211820;
border-radius: 2px 2px 0 0;
border-bottom: 0;
background-color: #fbfad0;
-webkit-perspective: 1200px;
perspective: 1200px;
}
.door {
left: 0; top: 0; right: 0; bottom: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: left;
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.door-face-1,
.door-face-0 {
left: -3px; top: -3px; right: -3px; bottom: -3px;
border: 3px solid #211820;
background-color: #295489;
}
.door-face-0 {
transform: translateZ(-12px);
}
.door-face-1 {
transform: translateZ(0);
}
.door-face-2 {
height: 6px;
left: -3px; right: -3px; top: 0;
border: 3px solid #211820;
border-radius: 2px;
background-color: #0c2e59;
transform: translate3D(0, -7.5px, -6px) rotateX(90deg);
}
.door-face-3 {
width: 6px;
top: -3px; right: 0; bottom: -3px;
border: 3px solid #211820;
border-radius: 2px;
background-color: #0c2e59;
transform: translate3D(7.5px, 0, -6px) rotateY(90deg);
}
/*鍏夌嚎*/
.light {
left: 0; top: 0; bottom: 0;
background: #F7E08F;
width: 1000px;
transform: translateZ(-13px);
}
/*闂ㄧ墝*/
.door-card {
width: 165px; height: 60px;
line-height: 60px;
background-color: #c1d0ec;
top: 60px; left: 0; right: 0;
margin: auto;
text-align: center;
font-size: 30px;
border: 3px solid;
border-radius: 2px;
}
.door-btn {
left: 0; right: 0;
text-align: center;
margin-top: 140px;
font-size: 24px;
color: #9dbce3;
line-height: 36px;
}
.door-in {
width: 104px; height: 40px;
border-radius: 40px;
border: 2px solid;
line-height: 40px;
background-color: #eacc86;
font-family: inherit; font-size: 24px;
padding: 0; margin: 10px 0;
}
/* 鍔ㄧ敾 */
@keyframes flyIntoRoom {
from {
transform: scale(1) translateZ(0);
opacity: 1;
}
to {
transform: scale(2) translateZ(100px);
opacity: 0;
}
}
.room-img {
position: absolute;
width: 375px; max-width: 100%;
left: 0; right: 0; top: 40px;
margin: auto;
}
HTML浠g爜锛?/h5>
<div id="doorBox" class="door-box">
<div class="wall">
<div class="door-border">
<div class="door-frame">
<!-- 闂?-->
<div id="door" class="door">
<!-- 闂ㄥ悗鐨勫厜绾?-->
<div id="light" class="light" style="opacity: .8;" hidden=""></div>
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1">
<!-- 闂ㄤ笂鐨勬寕鐗?-->
<div class="door-card">鎴戠殑涔︽埧</div>
<!-- 杩涘叆鎸夐挳 -->
<div class="door-btn">
<button id="doorBtnIn" class="door-in">杩涘叆</button>
</div>
</div>
<div class="door-face-3"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 涔︽埧 -->
<img src="./room-s.jpg" class="room-img" width="375" height="500">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>
JS浠g爜锛?/h5>
// 闂紝鍏夌嚎杩欑被杩愬姩鍏冪礌
var eleDoor = document.getElementById('door');
var eleLight = document.getElementById('light');
var eleDoorBox = document.getElementById('doorBox');
// 寮€闂ㄩ煶鏁坢p3
var eleAudioOpen = document.getElementById('audioOpen');
// 寮€闂ㄥ姩鐢?
var percentDoor = 0;
var fnOpenDoor = function () {
percentDoor++;
// 闂ㄥ畬鍏ㄦ墦寮€鍚庯紝杩涘叆涓嬩竴涓敾闈?
if (percentDoor == 100) {
eleDoorBox.classList.add('active');
return;
}
// 闂ㄦ墦寮€
eleDoor.style.transform = 'rotateY('+ (-90 * percentDoor / 100) +'deg)';
eleLight.removeAttribute('hidden');
// 鍏夌嚎鍙樺寲
eleLight.style.opacity = 0.8 - 0.9 * percentDoor / 100;
setTimeout(fnOpenDoor, 16);
};
document.querySelector('#doorBtnIn').addEventListener('click', function () {
eleAudioOpen.play();
fnOpenDoor();
});
CSS浠g爜锛?/h5>
.door-box {
max-width: 100%;
width: 375px; height: 628px;
margin: 40px auto;
background-color: #2a273c;
font-family: STHeiTi, SimHei;
overflow: hidden;
position: relative;
z-index: 1;
}
.door-box.active {
animation: flyIntoRoom 1s both;
}
.door-box div {
position: absolute;
}
.wall {
left: 0; top: 0; right: 0; bottom: 46px;
border-bottom: 3px solid #211820;
background-color: #768bb6;
max-height: calc(1.8 * (375px - 80px));
margin: auto;
box-shadow: 0 -200px #768bb6;
}
.door-border {
top: 28px;
left: 40px;
right: 40px;
bottom: 0;
border: 3px solid #211820;
border-radius: 2px 2px 0 0;
border-bottom: 0;
background-color: #183269;
}
.door-frame {
top: 10px; left: 9px; right: 9px; bottom: 0;
border: 3px solid #211820;
border-radius: 2px 2px 0 0;
border-bottom: 0;
background-color: #fbfad0;
-webkit-perspective: 1200px;
perspective: 1200px;
}
.door {
left: 0; top: 0; right: 0; bottom: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: left;
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.door-face-1,
.door-face-0 {
left: -3px; top: -3px; right: -3px; bottom: -3px;
border: 3px solid #211820;
background-color: #295489;
}
.door-face-0 {
transform: translateZ(-12px);
}
.door-face-1 {
transform: translateZ(0);
}
.door-face-2 {
height: 6px;
left: -3px; right: -3px; top: 0;
border: 3px solid #211820;
border-radius: 2px;
background-color: #0c2e59;
transform: translate3D(0, -7.5px, -6px) rotateX(90deg);
}
.door-face-3 {
width: 6px;
top: -3px; right: 0; bottom: -3px;
border: 3px solid #211820;
border-radius: 2px;
background-color: #0c2e59;
transform: translate3D(7.5px, 0, -6px) rotateY(90deg);
}
/*鍏夌嚎*/
.light {
left: 0; top: 0; bottom: 0;
background: #F7E08F;
width: 1000px;
transform: translateZ(-13px);
}
/*闂ㄧ墝*/
.door-card {
width: 165px; height: 60px;
line-height: 60px;
background-color: #c1d0ec;
top: 60px; left: 0; right: 0;
margin: auto;
text-align: center;
font-size: 30px;
border: 3px solid;
border-radius: 2px;
}
.door-btn {
left: 0; right: 0;
text-align: center;
margin-top: 140px;
font-size: 24px;
color: #9dbce3;
line-height: 36px;
}
.door-in {
width: 104px; height: 40px;
border-radius: 40px;
border: 2px solid;
line-height: 40px;
background-color: #eacc86;
font-family: inherit; font-size: 24px;
padding: 0; margin: 10px 0;
}
/* 鍔ㄧ敾 */
@keyframes flyIntoRoom {
from {
transform: scale(1) translateZ(0);
opacity: 1;
}
to {
transform: scale(2) translateZ(100px);
opacity: 0;
}
}
.room-img {
position: absolute;
width: 375px; max-width: 100%;
left: 0; right: 0; top: 40px;
margin: auto;
}
HTML浠g爜锛?/h5>
<div id="doorBox" class="door-box">
<div class="wall">
<div class="door-border">
<div class="door-frame">
<!-- 闂?-->
<div id="door" class="door">
<!-- 闂ㄥ悗鐨勫厜绾?-->
<div id="light" class="light" style="opacity: .8;" hidden=""></div>
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1">
<!-- 闂ㄤ笂鐨勬寕鐗?-->
<div class="door-card">鎴戠殑涔︽埧</div>
<!-- 杩涘叆鎸夐挳 -->
<div class="door-btn">
<button id="doorBtnIn" class="door-in">杩涘叆</button>
</div>
</div>
<div class="door-face-3"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 涔︽埧 -->
<img src="./room-s.jpg" class="room-img" width="375" height="500">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>
JS浠g爜锛?/h5>
// 闂紝鍏夌嚎杩欑被杩愬姩鍏冪礌
var eleDoor = document.getElementById('door');
var eleLight = document.getElementById('light');
var eleDoorBox = document.getElementById('doorBox');
// 寮€闂ㄩ煶鏁坢p3
var eleAudioOpen = document.getElementById('audioOpen');
// 寮€闂ㄥ姩鐢?
var percentDoor = 0;
var fnOpenDoor = function () {
percentDoor++;
// 闂ㄥ畬鍏ㄦ墦寮€鍚庯紝杩涘叆涓嬩竴涓敾闈?
if (percentDoor == 100) {
eleDoorBox.classList.add('active');
return;
}
// 闂ㄦ墦寮€
eleDoor.style.transform = 'rotateY('+ (-90 * percentDoor / 100) +'deg)';
eleLight.removeAttribute('hidden');
// 鍏夌嚎鍙樺寲
eleLight.style.opacity = 0.8 - 0.9 * percentDoor / 100;
setTimeout(fnOpenDoor, 16);
};
document.querySelector('#doorBtnIn').addEventListener('click', function () {
eleAudioOpen.play();
fnOpenDoor();
});
<div id="doorBox" class="door-box"> <div class="wall"> <div class="door-border"> <div class="door-frame"> <!-- 闂?--> <div id="door" class="door"> <!-- 闂ㄥ悗鐨勫厜绾?--> <div id="light" class="light" style="opacity: .8;" hidden=""></div> <!-- 闂ㄥ悗 --> <div class="door-face-0"></div> <!-- 涓変釜闈?--> <div class="door-face-2"></div> <div class="door-face-1"> <!-- 闂ㄤ笂鐨勬寕鐗?--> <div class="door-card">鎴戠殑涔︽埧</div> <!-- 杩涘叆鎸夐挳 --> <div class="door-btn"> <button id="doorBtnIn" class="door-in">杩涘叆</button> </div> </div> <div class="door-face-3"></div> </div> </div> </div> </div> </div> <!-- 涔︽埧 --> <img src="./room-s.jpg" class="room-img" width="375" height="500"> <div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>