Someone coded a flip box with CSS transform. It works fine in Safari and Firefox, but not in Chrome. In Chrome it continues to display the image and skews it. I tried several things in the CSS (labeled "Extra Code START") but it’s not working. How do I just make the image disappear or fix this?
I made a codepen:
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>
>Solution :
In my chrome browser there indeed was some strange artefact of the image visible although not recognisable as the image anymore. I fixed it with * { backface-visibility: hidden; } out of laziness, which worked fine but you would probably want to apply this only to the elements being transformed. backfire-visibilty precisely handles the see-throughness os 3D elements which is what you are dealing with here.