围绕垂直轴旋转 45 度元素

Question

我有一系列元素，如下图所示：

它们向一侧旋转 45 度（内部的内容为 -45 度，以保持直立）。

现在我想围绕垂直轴旋转每个元素，穿过元素的中心。 RotateY 不起作用，因为它处于 45 度角。

你会怎么做呢？

原文由 Philex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

诀窍是在 45 度旋转之前设置此旋转：

另请注意，要使旋转行为真正符合预期，您需要在基本状态下将其设置为 0

 .container {
    width: 200px;
    height: 200px;
    margin: 100px;
    border: solid 1px;
    transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
    transition: transform 2s;
}

.container:hover {
    transform:  rotateY(180deg) rotate(45deg); /* notice the order */
}
.inner {
    margin: 50px;
    transform: rotate(-45deg);
}

 <div class="container">
<div class="inner">INNER</div>
</div>

原文由 vals 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这就是我解释这个问题的方式。我对演示不太满意，因为它需要很多结构。但也许你可以验证行为？

基本上我使用包装器在 y 轴上旋转。将变换原点设置为中心是关键。额外的包装器用于防止鼠标悬停时闪烁。

https://jsfiddle.net/nm59mqky/1/

 .tile {
  transform: rotateY(0);
  transform-origin: center center;
}

.wrapper:hover .tile {
  transform: rotateY(180deg);
}

原文由 Philipp Lehmann 发布，翻译遵循 CC BY-SA 3.0 许可协议