如何使用CSS在对角线上旋转方形元素



给定一个正方形,我如何旋转它,比如元素翻转,其对角线是旋转的原点?我设法用翻转它

-webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);

你可以在这里看到一个例子

但其不在对角线轴线上旋转。我怎样才能做到这一点?基本上,我试图实现的是,当元素旋转时,它的右上角和左下角不会错位。。谢谢并为我糟糕的英语感到抱歉/解释:S!

看起来我参加聚会有点晚了,但

-webkit-transform: rotate3d(-2,1, 0,-180deg);

可能会给你想要的行为。

正如您在这个jsfiddle中所看到的,矩阵变换和缩放的组合是有效的。有了背景图像,效果会变得更加明显。

如果我正确理解您的问题,您只需要添加以下内容:

-webkit-transform-origin: left bottom

如果不是这样,请在此处查看有关如何更改旋转原点的信息:https://developer.mozilla.org/en/CSS/transform-origin

最新更新