使用 CSS 变换实现倾斜：倾斜两侧

提供的图像展示了一种有趣的倾斜效果，该效果使元素的两个角都形成角度。要使用 CSS 转换重新创建此效果，请按照下列步骤操作：

应用透视倾斜：

要添加透视，请使用以下 CSS 属性：

transform: perspective(distance) rotateY(angle);

将“距离”替换为一个值以设置透视距离（较高的值会创建一个更远的视角）。将“angle”替换为所需的旋转角度（在本例中为 45 度）。

示例 CSS:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

HTML 代码：

要将倾斜应用于元素，请添加以下类：

外部资源示例：

提供的 CSS 和 HTML 代码源自http://desandro.github.com/3dtransforms/docs/perspective.html。该网站提供了有关使用透视变换的更多示例和文档。