在 Z 方向倾斜 HTML 元素

Question

下面是我们想要在 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 window 中将 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() 时发生的示例片段。（它使所有转换属性无效，就好像它是一个无效的 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 方向上倾斜。

Answer 1

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

您已经知道的倾斜是二维变换。它们的真正含义是 skewX（对于 Y 轴）和 skewY（对于 X 轴）。

如果是 3D，你会

Y 的 skewX
Z 的 skewX
X 偏斜 Y
Z 的 skewY
X 的 skewZ
Y 的 skewZ

没那么简单！

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

在 Z 方向倾斜 HTML 元素

Skew an HTML element in the Z direction

html

css

css-transforms

css-animations