[分享]css做出半3d样式

CSS是网页开发中必不可少的技术之一，它可以让我们为网页添加各种效果，例如半三维的效果就可以使用CSS来实现。// 设置元素的长宽高、边框、背景颜色和位置 .box { width: 200px; h...

CSS是网页开发中必不可少的技术之一，它可以让我们为网页添加各种效果，例如半三维的效果就可以使用CSS来实现。

// 设置元素的长宽高、边框、背景颜色和位置
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  position: relative;
}

// 设置元素的左右两侧，作为3D效果的展示框圈
.box:before,
.box:after {
  content: ';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  transform: rotateY(0deg);
  z-index: -1;
}

// 设置展示框圈的颜色和旋转角度，生成立体感
.box:before {
  border-color: #999 #ccc #ccc #999;
  transform: rotateY(30deg);
}

.box:after {
  border-color: #ccc #999 #999 #ccc;
  transform: rotateY(-30deg);
} 

以上代码使用了CSS的transform属性来实现半3D效果，为了展现出立体感，我们创建了两个伪元素:before和:after，作为展示框圈，使用rotateY(30deg)和rotateY(-30deg)旋转角度来生成立体感。此外，我们需要设置元素的z-index属性，以便将展示框圈置于内容之下。

通过以上的代码，我们可以在网页中为元素添加半3D的效果，使其呈现出更加生动逼真的表现形式，增强网页的交互性和趣味性。