本文主要是介绍使用css制作3D盒子，目的是把盒子并列制作成3D货架，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注意事项：这个正方体的其他面的角度很难调，因此如果想动态生成，需要很复杂的设置动态的角度，反正我是折腾了半天没继续搞下去，
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>
这篇关于使用css制作3D盒子，目的是把盒子并列制作成3D货架的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
