css实现一个三维立体包装盒子箱子效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现一个三维立体包装盒子箱子效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root{
          --size: 200px;
          --icon-size: 40px;
          --icon-color: #483C3E;
        }
        
        body{
          display: grid;
          min-height: 100vh;
          place-items: center;
          background-color: #333;
        }
        /* BOX STYLES*/
        .box{
          position: relative;
          width: var(--size);
          height: var(--size);
          transform-style: preserve-3d;
          transform:rotatex(345deg) rotateY(216deg);
          z-index: 0;
        }
        .face{
          position: absolute;
          height: 100%;
          width: 100%;
        }
        .bottom{
          transform:rotatex(-90deg);
          transform-origin: bottom center;
          background-color: #98511B; 
          z-index: 0;
          box-shadow: 0 var(--size) 3px #0005;
        }
        .front{
          background-color: #CB9869;
           z-index: 5;
        }
        .back{
          background-color: #af8e6f; 
          transform: translatez(var(--size));
          z-index: 2;
        }
        .right{
          background-color: #8d745e;
          transform-origin: center left;
           z-index: 4
        }
        .left{
          background-color: #FFC889;
          transform:rotatey(90deg);
          transform-origin: center right;
          z-index: 3;
        }
        .left::after, .right::after{
          content: "";
          height: 15%;
          width: 10%;
          position: absolute;
          top: 0;
          left: 45%;
          background-color: #0004;
          backface-visibility: hidden;
        }
        /* COVER STYLES*/
        .top{
          transform: rotatex(90deg);
          transform-origin: top center;
          z-index: 6;
          position: absolute;
          transform-style: preserve-3d;
          cursor: pointer;
        }
        .cover-back, .cover-front{
          width: var(--size);
          height: calc(var(--size) / 2);
          background-color: #EBB27A;
          position: absolute;
          transition: transform 0.5s .35s linear;
          z-index: 8;
        }
        .cover-back::after, .cover-front::after{
          content: "";
          height: 10%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #0004;
          backface-visibility: hidden;
        }
        .cover-front::after{
          top: 90%;
        }
        .cover-back{
          left: 0;
          bottom: 0;
          transform-origin: center bottom;
        }
        .top:active > .cover-back{
          transform: rotatex(-200deg);
          transition: transform 0.5s linear;
        }
        .cover-front{
          left: 0;
          top: 0;
          transform-origin: center top;
        }
        .top:active > .cover-back + .cover-right + .cover-left + .cover-front{
          transform: rotatex(200deg);
          transition: transform .5s linear;
        }
        .cover-left, .cover-right{
          height: var(--size);
          width: calc(var(--size) / 3);
          background-color: #c99e76;
          position: absolute;
          transition: transform .5s linear;
          z-index: 7;
        }
        .cover-left{
          left: 0;
          bottom: 0;
          transform-origin: center left;
        }
        .top:active > .cover-back + .cover-right + .cover-left{
          transform: rotatey(-190deg);
          transition: transform .5s .35s linear;
        }
        .cover-right{
          right: 0;
          top: 0;
          transform-origin: center right;
        }
        .top:active > .cover-back + .cover-right{
          transform: rotatey(190deg);
          transition: transform .5s .35s linear;
        }
        .content{
          width: 80%;
          height: 80%; 
          position: absolute;
          bottom: 1px;
          display: grid;
          place-items: center;
          transform: rotateY(-216deg) 
            translatez(calc(var(--size) / -2 )) 
            translatex(-50%);
          transition: transform .4s linear;
          
        }
        .top:active + .content{
          transform: rotateY(-216deg) 
            translatez(calc(var(--size) / -2 )) 
            translatex(-50%) translatey(-82%);
          transition: transform .5s 1s 
            cubic-bezier(.24,.05,.66,1.24);
        }
        
        /* ICONS STYLES*/
        .icons{
          display: flex;
          justify-content: flex-start;
          position: absolute;
          bottom: 5px;
          left: 5px;
        }
        .icons div{
          margin: 2px;
          border-radius: 3px;
        }
        .arrow{
          height: 100%;
          width: 100%;
          clip-path: polygon(21% 28%, 41% 39%, 52% 22%, 56% 29%, 48% 36%, 72% 38%, 84% 14%, 75% 19%, 67% 5%, 39% 5%);
          background-color: var(--icon-color);
          position: absolute;
        }
        .arrow:nth-child(2){
          transform: rotate(120deg);
        }
        .arrow:nth-child(3){
          transform: rotate(-125deg);
        }
        .umbrella{
          height: var(--icon-size);
          width: var(--icon-size);
          position:relative;
          border: 1px solid var(--icon-color);
        }
        .umbrella::after{
          content:"";
          height: 40%;
          width: 100%;
          top: 20%;
          position: absolute;
          background-color:var(--icon-color);
          border-radius: 50% 50% 50% 50% / 90% 90% 10% 10%;
        }
        .umbrella::before{
          content:"";
          height: 80%;
          width: 10%;
          top: 10%;
          left: 50%;
          position: absolute;
          border-radius: 0% 0% 50% 50% / 0% 0% 10% 10%;
          border: calc(var(--icon-size) * 4 / 100) solid var(--icon-color);
          border-top: none;
          border-right: none;
        }
        .glass{
          height: var(--icon-size);
          width: var(--icon-size);
          position:relative;
          border: 1px solid var(--icon-color);
        }
        .glass::after{
          content:"";
          height: 60%;
          width: 70%;
          top:5%;
          left:15%;
          position: absolute;
          background-color:var(--icon-color);
          border-radius: 0% 0% 50% 50% / 0% 0% 100% 100% ;
          clip-path: polygon(0% 0%, 55% 0, 68% 20%, 54% 34%, 75% 55%, 61% 34%, 75% 19%, 67% 0, 100% 0%, 100% 100%, 0% 100%);
        }
        .glass::before{
          content:"";
          height: 95%;
          width: 100%;
          position: absolute;
          background-color: var(--icon-color);
          clip-path: polygon(15% 100%, 45% 90%, 40% 55%, 60% 55%, 55% 90%, 85% 100%);
        }
        .orientation{
          height: var(--icon-size);
          width: var(--icon-size);
          position:relative;
          border: 1px solid var(--icon-color);
        }
        .orientation::after,
        .orientation::before{
          content:"";
          height: 70%;
          width: 40%;
          top:5%;
          left:15%;
          position: absolute;
          background-color:var(--icon-color);
        clip-path: polygon(50% 0, 80% 30%, 60% 30%, 60% 100%, 40% 100%, 40% 30%, 20% 30%);
        }
        .orientation::after{
          left: 45%;
        }
        .base{
          height: 8%;
          width: 70%;
          left: 15%;
          bottom: 10%;
          position: absolute;
          background-color: var(--icon-color);
        }
        .recycled{
          height: calc(var(--icon-size) * 2);
          width: calc(var(--icon-size) * 2);
          position: absolute;
          bottom: 3px;
          right: 3px;
        }
        
        .ball{
          height: calc(var(--icon-size) * 1.3);
          width: calc(var(--icon-size) * 1.3);
          position: absolute;
          bottom: 10px;
          left: 10px;
          border-radius: 50%;
          border: 1px solid var(--icon-color);
          background-image: radial-gradient(#CB9869 10%, var(--icon-color) 11% 13%,#CB9869 14% 20%, var(--icon-color) 21% 22%, #0000 24%),linear-gradient(var(--icon-color) 48%, #0000 46% 54%, var(--icon-color) 54% 55%, #0000 57%)
        }
        .label{
          height: calc(var(--icon-size) * 1.5);
          width: calc.........完整代码请登录后点击上方下载按钮下载查看