css怎么做正方体

CSS可以用来制作各种形状的图形，包括正方体。下面我们来学习一下怎么用CSS制作正方体。

// HTML代码            // CSS代码.cube {
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      transform: perspective(800px);
}
.side {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #ccc;
      opacity: 0.7;
}
.front {
      transform: translateZ(100px);
}
.back {
      transform: translateZ(-100px) rotateY(180deg);
}
.left {
      transform: translateX(-100px) rotateY(-90deg);
}
.right {
      transform: translateX(100px) rotateY(90deg);
}
.top {
      transform: translateY(-100px) rotateX(90deg);
}
.bottom {
      transform: translateY(100px) rotateX(-90deg);
}
    

首先，我们在HTML里面创建一个div，class为“cube”，其内部有6个div，分别对应正方体的6个面。在CSS中，我们对“.cube”设置了宽高和“transform-style:preserve-3d”，让其变成一个3D盒子。同时用“transform:perspective(800px)”调整了其观看角度。

我们接下来对每个面分别进行样式设置。由于正方体在3D中是由直线连接的各个平面组成，所以我们通过“transform:translateZ()”、“transform:translateX()”、“transform:translateY()”来调整每个面的位置。其中，各个面的Z轴的值对应的是正方体各个面的位置关系，顶部和底部面的transform设置的是对X轴或Y轴的旋转。

最后，我们设置每个面的宽高、背景颜色和透明度，这样我们就可以成功地用CSS来制作出一个3D正方体啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！