Css 绕垂直轴旋转45度图元

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

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

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

---

您将如何执行此操作？

我不知道您的代码到底是什么样子的，但对于一个简单的旋转平铺（div），我将尝试以下操作：

@关键帧垂直旋转{
0% {
变换：旋转3d（0,1,0,0度）；
}
100% {
变换：旋转3d（0,1,0,360度）；
}
}
身体{
填充：20px；
}
.瓷砖{
宽度：65px；
高度：65px；
背景色：红色；
文本对齐：居中；
变换：旋转3d（0,0,1,45度）；
显示：内联块；
}
特恩迪夫先生{
宽度：65px；
}
特恩迪夫：悬停{
动画：垂直旋转1.1秒放松；
}

---

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

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

---

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

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

.container{
宽度：200px；
高度：200px；
利润率：100像素；
边框：实心1px；
变换：旋转Y（0度）旋转（45度）；/*需要Y在0度才能正常工作*/
转变：转变2s；
}
.容器：悬停{
变换：旋转（180度）旋转（45度）；/*注意顺序*/
}
.内部{
利润率：50像素；
变换：旋转（-45度）；
}

内部的

你能展示一下你到目前为止都在尝试什么吗？展示一些代码或现场小提琴吗？

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

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