css3 实现立体四边形

可以使用 CSS3 的 transform 属性来实现立体四边形的效果，具体步骤如下：

1. 创建一个正方形的 div 元素，并设置其宽度和高度；
2. 使用 transform: perspective() 属性设置透视效果，为元素添加立体感；
3. 使用 transform: rotateX() 和 transform: rotateY() 属性分别绕 X 轴和 Y 轴旋转元素，使其呈现立体效果；
4. 使用 transform: translateZ() 属性将元素向屏幕内部移动，使其呈现出立体效果。

下面是一个简单的实现代码示例：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transform: perspective(500px) rotateX(45deg) rotateY(45deg) translateZ(50px);
}

这段代码会创建一个宽高为 100px 的灰色正方形，并将其设置为45度角绕 X 轴和 Y 轴旋转，同时向屏幕内部移动50px，从而呈现出立体效果。