CSS 绕垂直轴旋转 45 度元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42834529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate 45-degree element around vertical axis
提问by Philex
I've got a series of elements, as shown in the image below:
我有一系列元素，如下图所示：
They are rotated 45 degrees to one side (the content inside -45 degrees, to remain upright).
它们向一侧旋转 45 度（-45 度内的内容，以保持直立）。
Now I'd like to rotate each element around a vertical axis, going through the element's center. RotateY doesn't work, as it is at a 45-degree angle.
现在我想围绕垂直轴旋转每个元素，穿过元素的中心。RotateY 不起作用，因为它处于 45 度角。
How would you go about doing this?
你会怎么做呢？
回答by vals
The trick is to set this rotation before the 45 degrees rotation:
诀窍是在 45 度旋转之前设置此旋转：
Notice also that to make the rotation behave really as expect, you need to set it to 0 in the base state
另请注意，要使旋转行为真正符合预期，您需要在基本状态下将其设置为 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>回答by Philipp Lehmann
This is how I interpret the question. I'm not very happy with the demo since it needs a lot of structure. But maybe you can verify the behavior?
这就是我如何解释这个问题。我对演示不是很满意，因为它需要很多结构。但也许你可以验证行为？
Basically I use a wrapper to rotate on the y-axis. It is key to set the transform origin to the center. The additional wrapper is used to prevent a flickering on mouse hover.
基本上我使用包装器在 y 轴上旋转。将变换原点设置为中心是关键。额外的包装器用于防止鼠标悬停时闪烁。
https://jsfiddle.net/nm59mqky/1/
https://jsfiddle.net/nm59mqky/1/
.tile {
transform: rotateY(0);
transform-origin: center center;
}
.wrapper:hover .tile {
transform: rotateY(180deg);
}
回答by Rein
I dont know exactly what your code looks like, but for a simple spinning tile (div) i would try something like this:
我不知道你的代码到底是什么样的，但对于一个简单的旋转瓷砖（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>You could just do it with transform: rotate3d();and without a parent div, but to keep it easy i did it like this.
你可以在有transform: rotate3d();和没有父 div 的情况下进行，但为了方便起见，我是这样做的。
