Chrome doesn't properly recognize the back side.(HTML, CSS, backface-visibility: hidden)

Question

Chrome doesn't properly recognize the back side.
I want to make front-face ==> digital clock / back-face ==> weather.
This is my website .

On mobile Chrome, Safari ==> work.
PC Chrome and Edge ==> doesn't work.

How to I fix it?

-----------------here is my summarized code----------

<div class=front/>
<div class=back/>

.front, .back{ position: absolute; backface-visibility: hidden; }
.back{ transform: rotateY(180deg); }

Answer 1

Try with these CSS properties...

.ClockStyle {

 backface-visibility: visible;

}


.ClockTrans {

 transform-style: flat;

 transform-origin: 50% 50%;

 transform: rotateY(180deg);

 transition: all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

NB: Or whatever transition you prefer.