CSS如何让3个盒子层叠立体

CSS是一种用于美化网页的技术。在网页设计中，我们会经常遇到需要将多个盒子进行层叠立体的情况。接下来就让我们来看看CSS如何实现这一效果。

.Box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.Box img {
  position: absolute;
  width: 100%;
}

.Box .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0.5);
}

.Box .layer1 {
  transform: rotateX(60deg) translateZ(-50px);
}

.Box .layer2 {
  transform: rotateX(-60deg) translateZ(-50px);
}

首先，我们设置一个父元素，它拥有一个固定的宽度和高度，并且有一个边框。然后我们让这个父元素的溢出部分隐藏起来。 在父元素中，我们放置了一个元素，它的宽度和高度都为100%。这个元素就是我们要层叠的内容。 接下来，我们添加两个

元素分别作为层叠的“层”。这两个“层”元素的CSS样式类名分别为“layer1”和“layer2”。 其中，“layer1”的transform属性为“rotateX（60deg）translateZ（-50px）”，这表示将这个层顺时针旋转60度，同时将它向内移动50个像素。 同样，“layer2”的transform属性为“rotateX（-60deg）translateZ（-50px）”，这表示将这个层逆时针旋转60度，同时将它向内移动50个像素。 这样，我们就成功地将三个盒子层叠起来，形成了立体的效果。

上一篇：css如何让2个图片对其 下一篇：css如何让div两侧凸起