旋转后CSS块重置（变换）

Question

我正在尝试制作一个当鼠标悬停在物体上时旋转的图像，如果我在Y轴上进行此旋转一切正常，但是当我在X轴上执行此操作时，一切都会像以下示例。

编辑：我正在使用Chrome，现在正在进一步研究，互联网资源管理器甚至都没有显示红脸。

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateX(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateX(180deg);
  background: red;
}

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

正确版本（Y版）：

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
  background: red;
}

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

Answer 1

如果您从transform: rotateX(180deg);移除.card .back，它也适用于Chrome

＆＃13;

＆＃13;

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateX(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  background: red;
}

＆＃13;

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;