沿 Z 方向倾斜 HTML 元素答案

【问题标题】：Skew an HTML element in the Z direction沿 Z 方向倾斜 HTML 元素
【发布时间】：2021-05-17 23:28:18
【问题描述】：

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

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
body {
  perspective: 30rem;
}
body, div, span {
  display: flex;
  justify-content: center;
  align-items: center;
}
section > div > div {
  transform: scaleX( 0.5 ) scaleZ( 0.5 );
}
div div:nth-of-type( 2 ) {
  transform: rotateY( 180deg ) rotateZ( 90deg );
}
span {
  position: absolute;
  box-shadow: 0rem 0rem 0rem 0.5rem #444 inset;
  width: 10rem;
  height: 10rem;
  background-color: rgba( 200,200,200,0.25 );
}
span:nth-of-type( 1 ) { transform: translateZ( 5rem ); }
span:nth-of-type( 2 ) { transform: rotateY( 90deg ) translateZ( 5rem ); }
span:nth-of-type( 3 ) { transform: rotateY( -90deg ) translateZ( 5rem ); }

<style>
  .rotate_y, .rotate_x {
    animation-name: rotateY;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% { transform: rotateY( 0deg ); }
    100% { transform: rotateY( 360deg ); }  
  }
  .rotate_x {
    animation-name: rotateX;
  }
  @keyframes rotateX {
    0% { transform: rotateX( 0deg ); }
    100% { transform: rotateX( 360deg ); }  
  }
</style>

<section class='rotate_y'>
  <div class='rotate_x'>
    <div>
      <div> <span></span><span></span><span></span> </div>
      <div> <span></span><span></span><span></span> </div> 
    </div>
  </div>
</section>

在 HTML 窗口中添加 transform: skewX( 45deg ) 到 body section > div > div 可以正常工作：

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
body {
  perspective: 30rem;
}
body, div, span {
  display: flex;
  justify-content: center;
  align-items: center;
}
section > div > div {
  transform: scaleX( 0.5 ) scaleZ( 0.5 );
}
div div:nth-of-type( 2 ) {
  transform: rotateY( 180deg ) rotateZ( 90deg );
}
span {
  position: absolute;
  box-shadow: 0rem 0rem 0rem 0.5rem #444 inset;
  width: 10rem;
  height: 10rem;
  background-color: rgba( 200,200,200,0.25 );
}
span:nth-of-type( 1 ) { transform: translateZ( 5rem ); }
span:nth-of-type( 2 ) { transform: rotateY( 90deg ) translateZ( 5rem ); }
span:nth-of-type( 3 ) { transform: rotateY( -90deg ) translateZ( 5rem ); }

<style>
  .rotate_y, .rotate_x {
    animation-name: rotateY;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% { transform: rotateY( 0deg ); }
    100% { transform: rotateY( 360deg ); }  
  }
  .rotate_x {
    animation-name: rotateX;
  }
  @keyframes rotateX {
    0% { transform: rotateX( 0deg ); }
    100% { transform: rotateX( 360deg ); }  
  }
  
  /* skew in the X direction added */
  body section > div > div {
    transform: scaleX( 0.5 ) scaleZ( 0.5 ) skewX( 45deg );
  }
</style>

<section class='rotate_y'>
  <div class='rotate_x'>
    <div>
      <div> <span></span><span></span><span></span> </div>
      <div> <span></span><span></span><span></span> </div> 
    </div>
  </div>
</section>

transform: skewX( 45deg ) 和 transform: skewY( 45deg ) 完美运行。但是添加transform: skewZ( 45deg ) 不会。

Z 方向的倾斜是 CSS 规范的一部分吗？如果不是，什么是好的解决方法？

下面是我设置skewZ() 时发生的示例 sn-p。（它会使所有转换属性无效，就好像它是无效的 CSS 规则一样。）

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
body {
  perspective: 30rem;
}
body, div, span {
  display: flex;
  justify-content: center;
  align-items: center;
}
section > div > div {
  transform: scaleX( 0.5 ) scaleZ( 0.5 );
}
div div:nth-of-type( 2 ) {
  transform: rotateY( 180deg ) rotateZ( 90deg );
}
span {
  position: absolute;
  box-shadow: 0rem 0rem 0rem 0.5rem #444 inset;
  width: 10rem;
  height: 10rem;
  background-color: rgba( 200,200,200,0.25 );
}
span:nth-of-type( 1 ) { transform: translateZ( 5rem ); }
span:nth-of-type( 2 ) { transform: rotateY( 90deg ) translateZ( 5rem ); }
span:nth-of-type( 3 ) { transform: rotateY( -90deg ) translateZ( 5rem ); }

<style>
  .rotate_y, .rotate_x {
    animation-name: rotateY;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% { transform: rotateY( 0deg ); }
    100% { transform: rotateY( 360deg ); }  
  }
  .rotate_x {
    animation-name: rotateX;
  }
  @keyframes rotateX {
    0% { transform: rotateX( 0deg ); }
    100% { transform: rotateX( 360deg ); }  
  }
  
  /* skewing in the Z direction doesn't register */
  body section > div > div {
    transform: scaleX( 0.5 ) scaleZ( 0.5 ) skewX( 45deg ) skewZ( 45deg );
  }
</style>

<section class='rotate_y'>
  <div class='rotate_x'>
    <div>
      <div> <span></span><span></span><span></span> </div>
      <div> <span></span><span></span><span></span> </div> 
    </div>
  </div>
</section>

这里想要的结果是相关的 html 元素同时在 Z 和 X 方向上倾斜。

【问题讨论】：

skewZ() 是无效属性。可以应用倾斜的唯一有效轴是 X 和 Y 轴。您可能必须使用其他方法来实现skewZ 效果。可以尝试使用transform-origin()？
@sagar1025 是的，看起来是这样 :(。我很好奇是否有一种直接的方法来实现对角倾斜。
由于倾斜仅应用于二维平面，因此您需要rotate3d()。如果您需要在 3D 空间中剪切，rotate3d(0,0,0,45deg) 可能会解决问题
@sagar1025 示例，否则它不起作用大声笑。实际上，自从提出这个问题以来，我已经解决了它。使用包装元素来倾斜X。将孩子旋转 90 度，然后再次 skewX。如果有一些更优雅的解决方案，我仍然很好奇。
但是我们可以在 2 维元素上 transalteZ() --> 我们在 3D 空间中平移 2D，所以使用 translateZ 和 rotateZ 是合乎逻辑的，因为它们是相对于空间而不是元素的（这种变换不会扭曲元素，它们会移动它）。 scaleZ() 的逻辑相同，尝试将其应用于元素并不会发生任何事情，它仅在处理 3D 空间时才有意义

标签： html css css-animations css-transforms

【解决方案1】：

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

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

当你去 3D 时，你会拥有

Y 的skewX
为 Z 倾斜 X
X 偏斜
Z 偏斜
X 的倾斜 Z
Y 的倾斜 Z

没那么容易！

有两种方法可以获得一些 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

【讨论】：

我不明白为什么你的 matrix3d() 值有效。但我终于开始测试这个事先对矩阵一无所知的东西......事实上它确实起到了“skewZ”的作用......谢谢。仍然很困惑，但谢谢。