Html 如何通过扭曲元素来倾斜元素

.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>

 .el {
        margin: 100px;
        width: 100px;
        height: 100px;
        background-color: red;
        transform: perspective(100px) rotateX(45deg);
      }

<div class="el"><img src="https://picsum.photos/100" alt=""></div>

Html相关问答推荐

悬停时放大人物：不要增加其周围边界的大小

关于角内按钮范围的混乱

restrict. form—text width to input s width'

应用于文本而不是弹性容器的Flexbox属性

创建具有圆锥渐变的水平CSS聚光灯

为什么这个高度为100%的页面会出现滚动条？

如何在将文本垂直居中的同时将文本右对齐？

将表格背景图像置于行背景 colored颜色 之上

有没有办法根据另一个项目调整FlexBox项目的大小？

为什么根捕获上的`min-height`溢出，而`height`没有？

Html视频标签：圆角像素化

有没有一种方法可以很容易地将这个div从底部：0转换到顶部：0？

如何显示自定义按钮以将产品添加到WooCommerce购物车？

如何在ASP.NET Core中添加换行符

为什么我不能覆盖 div 的样式？

Angular MatBadge 在高于 99 时不显示完整数字

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

Flex布局中，当父元素高度较高时，交叉轴上出现额外的空白问题.

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

屏幕缩小时背景图像裁剪高度