绕垂直轴旋转 45 度元素

Question

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

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

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

你会怎样做？

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>

Answer 2

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

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

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

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

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

Answer 3

我不知道你的代码到底是什么样的，但对于一个简单的旋转瓷砖（div）我会尝试这样的事情：

@keyframes rotate-vertical {
	0% {
		transform: rotate3d(0, 1, 0, 0deg);
	}
	100% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
}

body {
  padding: 20px;
}

.tile {
  width: 65px;
  height: 65px;
  background-color: red;
  text-align: center;
  transform: rotate3d(0, 0, 1, 45deg);
  display: inline-block;
}

.turndiv {
  width: 65px;
}

.turndiv:hover {
	animation: rotate-vertical 1.1s ease-out;
 }

<div class="turndiv">
  <div class="tile">
  </div>
</div>

你可以只用

transform: rotate3d();

来做，而不需要父级 div，但为了简单起见，我这样做了。

Answer 4

.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>