关于 CSS 旋转和拉伸

Question

• CSS 如何实现上图灰色正方形到蓝色平行四边形的变换？

• 很容易想到往右拉伸一下，再缩小一下

  .squre {
      transform: skewX(-45deg) scale(0.7071); /* 1 / sqrt(2) */
  }

• 但直观上明明就是旋转，正方形从站着变成躺着了啊，能不能只用旋转函数做到同样的效果呢？

Answer 1

3D 旋转要有效果就需要设置 perspective,而 perspective 是锥形透视，x 轴产生旋转的话 y 轴的平行边必然会看起来不平行。想象一下透视效果下的铁轨。或许把 perspective 设置成无穷大可以近乎于平行透视？相机位置也是个问题。所以这个效果不建议用 rotate3d, 直接 2D skew 就行。

Answer 2

不能，因为这不是旋转。另外，目测也不需要缩放。

Answer 3

应该使用rotate3d吧
https://developer.mozilla.org...