CSS块在旋转（变换）后重置

我试图确定当鼠标悬停在对象上时，图像会旋转，如果我在Y轴上旋转，一切正常，但是当我在X轴上旋转时，一切都会失败，如下面的示例所示

编辑：我使用的是Chrome浏览器，现在再进一步看，InternetExplorer甚至没有显示红色的脸。

.card容器{
高度：150像素；
前景：600；
位置：相对位置；
宽度：150px；
}
.卡片{
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有1都易于输入输出；
宽度：100%；
背景：绿色；
}
.卡：悬停{
变换：rotateX（180度）；
}
.卡片.侧面{
背面可见性：隐藏；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.卡，回来{
变换：rotateX（180度）；
背景：红色；
}

---

如果移除

变换：rotateX（180度）

from

.card.back

它在Chrome上也能正常工作

.card容器{
高度：150像素；
前景：600；
位置：相对位置；
宽度：150px；
}
.卡片{
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有1都易于输入输出；
宽度：100%；
背景：绿色；
}
.卡：悬停{
变换：rotateX（180度）；
}
.卡片.侧面{
背面可见性：隐藏；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.卡，回来{
背景：红色；
}

似乎沿x轴旋转是正确的。动画完成后，图像将重置为绿色。这是过渡的工作方式：如果失去：悬停状态，则过渡到初始状态state@Fabrizio那为什么rotateX和rotateY在行为上有差异呢？铬元素证实，对我来说似乎是一个浏览器错误。你的代码会反转颜色，但我会找到解决方法，谢谢！一旦我被允许这样做，我会把它标记为awnser。