css - 绕垂直轴旋转 45 度元素

Question

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

它们向一侧旋转 45 度(内容在 -45 度内，以保持直立)。

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

你会怎么做？

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>