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

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

代码语言：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 .........完整代码请登录后点击上方下载按钮下载查看