Chrome 悬停时 Flipbox 显示扭曲倾斜的图像

Question

有人用 CSS 变换编写了翻转框。它在 Safari 和 Firefox 中运行良好，但在 Chrome 中却不行。在 Chrome 中，它继续显示图像并使其倾斜。我在 CSS（标记为“Extra Code START”）中尝试了几件事，但它不起作用。我该如何让图像消失或解决这个问题？

我做了一个代码笔： https://codepen.io/harmjoy/pen/ExwVarv

.collection-type-index #call-to-actions {
     background:rgba(2,139,255,1)
}
 .collection-type-index #our-programs-1 {
     background:#f0f0f0
}
 .flip {
     margin: 30px auto;
     position: relative;
     width: 300px;
     height: 200px;
     color: #000;
     text-align:center;
}
 .flip h1 {
     font-size: 30px;
     font-weight: bold;
     line-height:98px;
     margin:0;
     padding:0;
}
 .flip h2 {
     font-size: 21px;
     font-weight: bold;
     margin: 0;
     padding: 0 0 12px;
}
 .flip p {
     font-size: 14px;
     padding: 5px 0px;
     margin: 0 0 8px 0;
}
 .default-state, .active-state {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.4s ease;
  transform-origin: center center -50px;
  -webkit-transform-origin: center center -50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 .default-state {
     transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     height: 100%;
     display: flex;
}
 .default-state img {
     position: relative;
     flex-shrink: 0;
}
 .default-state h2 {
     position: absolute;
     z-index: 2;
     color: #fff;
     text-transform: uppercase;
     width: 100%;
     align-self: center;
     text-shadow: 0px 1px 10px rgba(0, 0, 0, 1);
}
 .active-state {
     transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -webkit-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -moz-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -o-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -ms-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

 .flip:hover .default-state {
    height:200px;
    width:300px;
     transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -webkit-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -moz-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -o-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -ms-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
}
 .flip:hover .active-state {
    height:200px;
    width:300px;
     z-index: 99999;
     transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}

/* Extra Code START */
.flip:hover .active-state,
.flip:hover .default-state {
  transform-origin: none;
  -webkit-transform-origin: none !important;
}

.flip:hover .active-state img,
.flip:hover .default-state img {
  display: none !important;
}
/* Extra Code END */

 a.btn {
     background: #013b59;
     color: #ffffff;
     font-size: 14px;
     padding: 8px 20px 8px 20px;
     text-decoration: none;
}
 a.btn:hover {
     background: #33627a;
     text-decoration: none;
}
.blog-item-wrapper .post-title { display: none; }

<div class="flip" id="yui_3_17_2_1_1638546693755_910">
    <div class="active-state" id="yui_3_17_2_1_1638546693755_909">
        <h2>Hope After School</h2>
        <a class="btn" href="/hope-after-school" id="yui_3_17_2_1_1638546693755_908">Learn More</a>
    </div>
    <div class="default-state">
        <h2>After-School Programs</h2>
        <img src="https://static1.squarespace.com/static/5b0ff9af3e2d099669c3dc55/5b1001a688251b1ccbfd906e/5b1004112b6a28f09dc1af7d/1527776479763/child-865116_1920.jpg?format=750w" alt="Childcare">
    </div>
</div>

Answer 1

在我的 chrome 浏览器中确实有一些奇怪的图像可见，但不再被识别为图像。出于懒惰，我用 * { backface-visibility: hidden; } 修复了它，效果很好，但您可能只想将其应用于正在转换的元素。 backface-visibilty 精确处理透视 os 3D 元素，这就是您在这里处理的内容。

Chrome 悬停时 Flipbox 显示扭曲倾斜的图像

Flipbox is displaying warped skewed image on hover in Chrome

html

css

flip

css-animations