- CSS 如何实现上图灰色正方形到蓝色平行四边形的变换?
很容易想到往右拉伸一下,再缩小一下
.squre { transform: skewX(-45deg) scale(0.7071); /* 1 / sqrt(2) */ }
- 但直观上明明就是旋转,正方形从站着变成躺着了啊,能不能只用旋转函数做到同样的效果呢?
3D 旋转要有效果就需要设置 perspective,而 perspective 是锥形透视,x 轴产生旋转的话 y 轴的平行边必然会看起来不平行。想象一下透视效果下的铁轨。或许把 perspective 设置成无穷大可以近乎于平行透视?相机位置也是个问题。所以这个效果不建议用 rotate3d, 直接 2D skew 就行。
###不能,因为这不是旋转。另外,目测也不需要缩放。
###应该使用rotate3d吧
https://developer.mozilla.org...