css+js实现一个三维旋转可打开的木箱子宝藏盒子效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css+js实现一个三维旋转可打开的木箱子宝藏盒子效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  

    <style>
        :root {  --rotate-x: 330deg;  --rotate-y: 45deg;}* {  box-sizing: border-box;}html, body {  margin: 0;  height: 100%;}input[type="checkbox"] {  display: none;}#treasure-chest-positioner, #treasure-chest {  width: 10rem;  height: 10rem;}#treasure-chest, #lid, #lid-panels, #chest, #front-panel, #left-panel, #right-panel, #back-panel {  transform-style: preserve-3d;}#treasure-chest-positioner {  position: relative;  top: 50%;  left: 50%;  transform: translate3d(-50%, -50%, 0);}#treasure-chest {  transition: 0.2s;  display: block;  transform: translateZ(-5rem) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));}#treasure-chest:hover {  cursor: pointer;}#lid {  position: absolute;  top: 0;  left: 0;  width: 10rem;  height: 3.3333333333rem;  transition: transform 0.3s;  transform-origin: 100% 45% -2.5rem;}#toggle-treasure:checked + #treasure-chest-positioner #lid {  transform: rotateX(110deg);}#lid #lid-panels {  width: 9.8rem;  height: 3.3333333333rem;  transform: translateX(0.1rem);}#lid .panel {  background-color: #D58757;  height: 66%;  width: 100%;  position: relative;  transform-style: preserve-3d;  background-image: url(//repo.bfw.wiki/bfwrepo/image/62bd40f3d6bab.png), linear-gradient(to left, rgba(0, 0, 0, 0.5) 0.9rem, transparent 1.25rem), linear-gradient(to right, rgba(0, 0, 0, 0.5) 0.9rem, transparent 1.45rem);  backface-visibility: hidden;  background-blend-mode: color-burn;}#lid .panel:after {  content: '';  display: block;  width: 100%;  height: 100%;  backface-visibility: hidden;  transform: rotateX(180deg);  background-image: none;  background-color: #553623;  position: absolute;  top: 0;  left: 0;  transform-style: preserve-3d;  border: 1px solid black;  background-image: linear-gradient(to bottom, transparent 49%, black 49%, black 51%, transparent 51%);}#lid .panel#panel-0 {  transform: translateZ(2.8571428571rem) translateY(-0.4rem);}#lid .panel#panel-1 {  transform: translateZ(6.5359477124rem) rotateX(45deg) translateY(-6.3291139241rem);}#lid .panel#panel-2 {  transform: translateZ(0.2rem) translateY(-7.4074074074rem) rotateX(90deg);}#lid .panel#panel-3 {  transform: translateZ(-10.5rem) rotateX(135deg) translateY(12.55rem);}#lid .panel#panel-4 {  transform: translateZ(-2.4390243902rem) rotateX(180deg) translateY(9.1743119266rem);}#lid .panel .board {  box-shadow: 0 0 0 1px black inset;  height: 50%;  width: 100%;}#lid .panel .iron-band {  width: 1.1rem;  height: 100%;  border-left: 1px solid black;  border-right: 1px solid black;  position: absolute;  top: 0;  background-color: gray;  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, transparent 15%, darkgray 20%, transparent 25%, transparent 85%, rgba(255, 255, 255, 0.4));  transform-style: preserve-3d;  transform: translateZ(1px);}#lid .panel .iron-band.left {  left: 0;}#lid .panel .iron-band.middle {  left: 50%;  margin-left: -0.55rem;}#lid .panel .iron-band.right {  right: -0.1rem;}#lid-left, #lid-right {  width: 5.35rem;  height: 3.75rem;  position: absolute;  overflow: hidden;  transform-style: preserve-3d;  -webkit-clip-path: polygon(30% 0%, 69% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);  clip-path: polygon(30% 0%, 69% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);  border-bottom: 1px solid black;}#lid-left .side-panel, #lid-right .side-panel {  width: 5.25rem;  height: 2.25rem;  position: absolute;  background-color: #D58757;  background-image: url(//repo.bfw.wiki/bfwrepo/image/62bd40f3d6bab.png);  background-blend-mode: multiply;  box-shadow: 0 0 0 1px black;  bottom: 0;  transform-style: preserve-3d;  overflow: hidden;}#lid-left .side-panel:after, #lid-right .side-panel:after {  content: '';  display: block;  position: absolute;  width: 0.75rem;  height: 100%;  background: gray;  transform-style: preserve-3d;}#lid-left .side-panel:first-child, #lid-right .side-panel:first-child {  transform: rotateZ(43deg) translateY(2.1rem);  z-index: 3;}#lid-left .side-panel:first-child:after, #lid-right .side-panel:first-child:after {  transform: rotate(-45deg) translateX(0.75rem);  top: 0;  left: 0;  border-right: 1px solid rgba(0, 0, 0, 0.4);}#lid-left .side-panel:nth-child(2), #lid-right .side-panel:nth-child(2) {  transform: rotateZ(75deg) translateY(1.65rem) translateX(-1.2rem);  z-index: 2;}#lid-left .side-panel:nth-child(2):after, #lid-right .side-panel:nth-child(2):after {  left: 1.4rem;  top: -0.5rem;  transform: rotate(-38deg);  border-right: 1px solid rgba(0, 0, 0, 0.4);}#lid-left .side-panel:nth-child(3), #lid-right .side-panel:nth-child(3) {  transform: rotateZ(90deg);  z-index: 1;}#lid-left .side-panel:nth-child(3):after, #lid-right .side-panel:nth-child(3):after {  border-right: 1px solid rgba(0, 0, 0, 0.4);}#lid-left .side-panel:nth-child(4), #lid-right .side-panel:nth-child(4) {  transform: rotateZ(105deg) translateY(-1.3rem) translateX(-0.5rem);  z-index: 2;}#lid-left .side-panel:nth-child(4):after, #lid-right .side-panel:nth-child(4):after {  left: 0.75rem;  top: 0.5rem;  transform: rotate(30deg);  border-right: 1px solid rgba(0, 0, 0, 0.4);}#lid-left .side-panel:last-child, #lid-right .side-panel:last-child {  transform: rotateZ(137deg) translateY(-2rem);  z-index: 3;}#lid-left .side-panel:last-child:after, #lid-right .side-panel:last-child:after {  left: 0.55rem;  top: 0.5rem;  transform: rotate(43deg) translateZ(1rem);  border-right: 1px solid rgba(0, 0, 0, 0.4);}#lid-left {  transform: rotateY(90deg) translateX(-0.1rem) translateY(-2rem) translateZ(-2.3529411765rem);}#lid-right {  transform: rotateY(90deg) translateX(-0.2rem) translateY(-5.3rem).........完整代码请登录后点击上方下载按钮下载查看