如何使用CSS沿着对角线轴旋转一个正方形元素？

Question

给定一个正方形，如何旋转它，使元素沿着以其对角线为旋转原点进行翻转？我已经成功使用以下代码进行了翻转：

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

您可以在这里看到一个示例。

但是，它无法绕对角轴旋转。我该如何实现？基本上，我想要实现的是，当元素旋转时，其右上角和左下角不会移动位置。谢谢，对我的糟糕英语/解释感到抱歉:S！

- Jonas

Answer 1

看起来我来晚了，但是

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

可能会给您想要的行为。

- sconway

Answer 2

如您所见在this jsfiddle，一个矩阵变换和缩放的组合可以实现效果。当添加了背景图像后效果更加明显。

同时请参考矩阵变换和缩放。

- oezi

---

谢谢！我忘了提到我的元素被包装在一个带有“perspective”的div中。考虑到这一点，我认为我们不需要改变比例值。 - Jonas

Answer 3

如果我正确理解了您的问题，您只需要添加这个：

-webkit-transform-origin: left bottom

如果这不是你想要的，请查看如何更改旋转原点的信息：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

- alexwells

---

谢谢，但这只是让左下角保持在原地（就像我想要的那样）。右上角仍然会移动。 - Jonas

我认为你只需以正确的比例非常小心地旋转x、y和z，就可以防止右上角移动。但我不知道正确的公式是什么。 - alexwells

我设法将它几乎旋转到了我想要的方式（“固定”的角落是另外两个..）：http://jsfiddle.net/ewGWj/2/ - Jonas