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