使用css制作3D盒子，目的是把盒子并列制作成3D货架

往事不堪回首..

已于 2023-10-06 13:59:04 修改

阅读量861

点赞数 1

分类专栏：前端集文章标签： css 前端

于 2023-10-06 10:55:50 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/133606842

版权

前端集专栏收录该内容

45 篇文章 1 订阅

订阅专栏

注意事项：这个正方体的其他面的角度很难调，因此如果想动态生成，需要很复杂的设置动态的角度，反正我是折腾了半天没继续搞下去，

1. 首先看效果（第一个五颜六色的是透明多个面，第2-3都是只有3个面是我实际需要的，右边的有3个并列的正方体与3个并列的长方体）：

长方体与正方体，所有代码：

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
       width: 100%;
      height: 100%;
    }
    .box {
	  float: left;    margin: 5%;  /*只是把两个div放一行，并相隔开*/
      width: 200px;
      height: 200px;
      background-color: skyblue;

      /* 在父元素中添加transform-style启用3d空间 */
      transform-style: preserve-3d;
      /* 在父元素中添加透视效果 */
      /* perspective: 200px; */

      transform: rotateX(353deg) rotateY(45deg);
    }
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .top {
      background-color: rgba(255, 0, 0, 0.4);
      transform: rotateX(90deg) translateZ(100px);
    }

    .bottom {
      background-color: rgba(0, 255, 0, 0.4);
      transform: rotateX(-90deg) translateZ(100px);
    }

    .front {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(0deg) translateZ(100px);
    }

    .back {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(-180deg) translateZ(100px);
    }

    .left {
      background-color: rgb(54 72 211 / 78%);
      transform: rotateY(-90deg) translateZ(100px);
    }
	
    .right {
      background-color: rgba(255, 255, 0, 0.4);
      transform: rotateY(90deg) translateZ(100px);
    }
	

	.top2 {background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(58deg); }
	.left2 {background-color: #2949bf; transform: rotateY(303deg) translateZ(100px);}
	.right2 { background-color: #949aad; transform: rotateY(33deg) translateZ(100px); }
	
	.box1 {
		float: left;
		margin: 5px;
		width: 50px;
		height: 50px;
		transform-style: preserve-3d;
		transform: rotateX(353deg) rotateY(45deg);
	}
	
	/*小正方体*/
	.top3 {
		background-color: #4b598d;
		transform: rotateX(90deg) translateZ(23px) rotatez(154deg) rotatey(2deg);
	}
	.left3 {
		background-color: #2949bf;
		transform: rotateY(304deg) translateZ(30px);
	}
	.right3 {
		background-color: #5f71a9;
		transform: rotateY(23deg) translateZ(27px);
	}

  </style>
</head>
<body>
  

  <div class="box">
    父元素
    <div class="item top">top</div>
    <div class="item bottom">bottom</div>
    <div class="item front">front</div>
    <div class="item back">back</div>
    <div class="item left">left</div>
    <div class="item right">right</div>
  </div>
  
    <div class="box">
    父元素
    <div class="item top2"></div>
    <div class="item left2"></div>
    <div class="item right2"></div>
  </div>
  
   <div class="box">
    父元素
    <div class="item" style="background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(49deg);"></div>
    <div class="item" style="background-color: #2949bf; transform: rotateY(311deg) translateZ(100px);"></div>
    <div class="item" style="background-color: #949aad;transform: rotateY(40deg) translateZ(100px);"></div>
  </div>
  
   <div>
	  <div style="float: left; margin: 5px; width: 50px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
		<div class="item top3"></div>
		<div class="item left3"></div>
		<div class="item right3"></div>
	  </div>
	  <div class="box1">   
		<div class="item top3"></div>
		<div class="item left3"></div>
		<div class="item right3"></div>
	  </div>
	  <div class="box1">
		<div class="item top3"></div>
		<div class="item left3"></div>
		<div class="item right3"></div>
	  </div>
  </div>
<br><br><br>

 <div>
	  <div style="width:80px;float: left; margin: 5px;height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
	  </div>
	  <div style="width:80px;float: left; margin: 5px;  height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
	  </div> 
	  <div style="width:80px;float: left; margin: 5px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">  
		<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px)  translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
		<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
		<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
	  </div>
  </div> 
</body>
</html>