Flipbox 在 Chrome 中悬停时显示扭曲的图像

Posted 2023-03-28

【中文标题】Flipbox 在 Chrome 中悬停时显示扭曲的图像

【英文标题】：Flipbox is displaying warped skewed image on hover in Chrome

【发布时间】：2022-01-10 00:05:58

【问题描述】：

有人用 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" >
    </div>
</div>

【参考方案1】：

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

【讨论】：

是的。是的。是的！！！太感谢了。我没有做很多 CSS 动画，也不知道这是一件事。