如何使用 CSS 在其对角轴上旋转方形元素？答案

【问题标题】：How to rotate a square shaped element over its diagonal axis with CSS?如何使用 CSS 在其对角轴上旋转方形元素？
【发布时间】：2014-07-18 03:19:50
【问题描述】：

给定一个正方形，我如何旋转它，例如元素翻转，其对角线为旋转原点？我设法使用以下方法翻转它：

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

你可以看一个例子here

但这不会在对角轴上旋转。我怎样才能做到这一点？基本上我想要实现的是，当元素旋转时，它的右上角和左下角不会不合适。感谢并为我糟糕的英语/解释感到抱歉：S！

【问题讨论】：

标签： css

【解决方案1】：

看来我参加聚会有点晚了，但是

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

可能会为您提供您正在寻找的行为。

【讨论】：

【解决方案2】：

正如您在 this jsfiddle 中看到的那样，matrix-transformation 和 scaling 的组合有效。 with a background-image效果越来越明显了。

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您只需添加以下内容：

-webkit-transform-origin: left bottom

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

【讨论】：