沿Z方向倾斜HTML元素

下面是基本的“未倾斜”元素，我们希望在Z和X方向上倾斜以创建对角线倾斜

*{
框大小：边框框；
变换样式：保留-3d；
边距：0；填充：0；
}
html，正文{
身高：100%；
}
身体{
透视图：30rem；
}
主体、分区、跨度{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
分区>分区>分区{
变换：scaleX（0.5）scaleZ（0.5）；
}
div div:n个类型（2）{
变换：旋转（180度）旋转（90度）；
}
跨度{
位置：绝对位置；
长方体阴影：0rem 0rem 0rem 0.5rem#444插图；
宽度：10雷姆；
高度：10雷姆；
背景色：rgba（200200,0.25）；
}
第n种类型（1）{transform:translateZ（5rem）；}
span:n类型（2）{transform:rotateY（90deg）translateZ（5rem）；}
span:n类型（3）{transform:rotateY（-90deg）translateZ（5rem）；}

.旋转y、.旋转x{
动画名称：rotateY；
动画持续时间：6s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
.旋转{
动画名称：rotateX；
}
@旋转关键帧{
0%{transform:rotateX（0deg）；}
100%{变换：旋转（360度）；}
}

实际上，不可能简单地设置一个skewZ，因为它比这个更难

您已经知道的倾斜是2D变换。它们实际上是skewX（对于Y轴）和skewY（对于X轴）

当使用3D时，您将

• 用X表示Y
• X代表Z
• X的偏斜
• 歪斜的
• X的偏斜
• 斜杠

不那么容易

有两种方法可以获得一些skewZ

首先，使用旋转，正如您已经评论的那样。请记住取消设置：

transform: rotateX(90deg) skewX(10deg) rotateX(-90deg)

另一种是使用变换矩阵。这是一个有晶格偏斜的矩阵

1          skewY      0        0
skewX         1       0        0
0             0       1        0
0             0       0        1 

这是一个有Z偏斜的矩阵

1             0      skewZ/x        0
0             1      skewZ/y        0
0             0       1             0
0             0       0             1 

---

skewZ（）

是无效属性。可以沿其应用倾斜的唯一有效轴是X轴和Y轴。您可能需要使用其他方法来实现

skewZ

效果。可以尝试使用

transform-origin（）

？@sagar1025是的，它看起来是这样的：（.我很好奇是否有一种简单的方法来实现对角线倾斜。因为倾斜只应用于二维平面，

rotate3d（）

是您需要的。如果您需要在三维空间中剪切，

rotate3d（0,0,45度）

可能只需要执行以下操作trick@sagar1025示例或它不起作用lol。实际上，自从问了这个问题之后，我已经解决了它。使用包装器元素来歪斜。将子对象旋转90度，然后再次歪斜。如果有一些解决方案，我仍然对更优雅的解决方案感兴趣。但是我们可以transalteZ（）在二维元素-->上，我们在三维空间中平移二维，因此有一个translateZ和rotateZ是合乎逻辑的，因为它们是相对于空间而不是相对于元素的（这种变换不会扭曲元素，而是移动元素）。scaleZ（）的逻辑相同，尝试将其应用于元素，但什么都不会发生，它只有在处理3D空间时才有意义。我不明白为什么matrix3d（）值会起作用。但我最终开始测试它，事先对矩阵一无所知…事实上，它起到了“skewZ”的作用…谢谢。仍然感到困惑，但谢谢。