CSS的3D应用：绘制长方体 |
您所在的位置：网站首页 › 长方体立体图形怎么画竖着的 › CSS的3D应用：绘制长方体 |
CSS的3D应用：绘制长方体
|
实现效果：
① 绘制6个面，2个正方形 + 4个长方形 ② 旋转各个面的角度 ③ 摆放各个面的位置 代码实现： 下 上 右 左 后 前cube样式中的transform属性并不影响长方体的绘制，即去除这两行代码也依然是完成了长方体的绘制。但由于绘制出来的长方体是从正前面展示的，因此看上去就只是二维平面的长方形而已，所以我采用transform旋转X和Y轴调整视角。 .cuboid { transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */ transform: rotateX(-30deg) rotateY(30deg); } .cuboid div { width: 72px; position: absolute; opacity: 0.5; /* 半透明效果方便查看绘制情况 */ display: flex; justify-content: center; align-items: center; } .back { height: 144px; background-color: #9900FF; transform: rotateY(180deg) translateZ(36px); } .right { height: 144px; background-color: #333333; transform: rotateY(90deg) translateZ(36px); } .left { height: 144px; background-color: #00FF99; transform: rotateY(-90deg) translateZ(36px); } .top { height: 72px; background-color: #0099FF; transform: rotateX(90deg) translateZ(36px); } .bottom { height: 72px; background-color: #FFCC00; transform: rotateX(-90deg) translateZ(108px); } .front { height: 144px; background-color: #FF5757; transform: rotateY(0deg) translateZ(36px); } |
【本文地址】
今日新闻 |
推荐新闻 |