如何扭曲卡片元素实现顶部收窄底部加宽的垂直挤压效果？

需求描述 #

需要将卡片（img元素）扭曲为指定效果，以四个顶点A(左上)、B(右上)、C(左下)、D(右下)为参考，具体要求：

• 缩小A与B的间距
• 增大C与D的间距
• 垂直挤压卡片，缩短顶部(A、B)与底部(C、D)的垂直距离

现有代码 #

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem;
}

.card {
    transform-style: preserve-3d;
    background: red;
    height: 250px;
    width: 190px;
}

<div class="parent">
  <div class="card"></div>
</div>

解决方案 #

通过CSS的transform属性组合垂直缩放和水平倾斜，即可实现需求中的变形效果。以下是修改后的代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem;
}

.card {
  transform-style: preserve-3d;
  background: red;
  height: 250px;
  width: 190px;
  /* 核心变形代码 */
  transform: scaleY(0.7) skewX(12deg);
  /* 可选：调整变形基准点，默认是元素中心 */
  transform-origin: top center;
}

效果说明 #

• scaleY(0.7)：垂直方向缩小元素高度，直接满足垂直挤压、缩短上下距离的需求。
• skewX(12deg)：让元素沿X轴向右倾斜，顶部宽度被压缩（缩小A-B间距），底部宽度被拉伸（增大C-D间距），同时满足前两个需求。
• 若需要更精准的变形控制，可以使用matrix变换替代组合属性，例如：

  transform: matrix(0.8, 0, 0.25, 0.7, 0, 0);
  

  其中：
  • 0.8：水平缩放顶部宽度
  • 0.25：水平倾斜程度，控制底部宽度的拉伸幅度
  • 0.7：垂直缩放高度

内容的提问来源于stack exchange，提问作者user23088507