Webkit Backface Visibility Not Working

Webkit backface visibility not working

I had a similar problem with children of such an element when a child had a webkit-transform.
I noted that I had to set the backface visibility on that element as well:

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

So the solution is to use as well:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

Backface Visibility not working on children

I finally discovered how to solve this!
The problem was the the 3d was not affecting the image. Just by adding the property: transform-style: preserve-3d; includes the image as part of the "3d world". Before, the backface property wasn't working, because it really wasn't 3d! It was like a texture painted on the parent's surface. Now it is a 3d entity with all its components and it can be transformed in 3d without collapsing to the surface of the parent.

.container {  position: relative;  transform-origin: 50% 50% 0;  transition: transform 1s ease 0s;  width: -moz-min-content;  width: -webkit-min-content;  transform-style: preserve-3d;}.container img {  backface-visibility: hidden;}input:checked + .container {  transform: rotateY(180deg);}

<input type="checkbox" name="" id="" /><div class="container">  <img src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Sample Image" /></div>

backface visibility not working in safari

I think the issue here is with the

backface-visibility: hidden;

It's not being supported in ios and in safari.

In your code just replace the code with

 #front #back {
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility: hidden;
}

I hope this will help you.

CSS: backface-visibility not working?

Instead of rotating the parent, you have to rotate the two sides individually.

    .content {      width: 100%;      height: 70vh;      margin-left: auto;      margin-right: auto;      position: relative;      top: 50px;    }        .card {      margin: 10px;      width: 300px;      height: 450px;      float: left;      position: relative;      left: 10%;    }                .front,    .back {      width: 300px;      height: 450px;      position: absolute;      backface-visibility: hidden;      transition-duration: 600ms;      border: 1px solid black;    }
    .front {      background-color: green;      transform: none;    }    .back {      background-color: red;      transform: rotateY(180deg);    }

    .card:hover .front {      transform: rotateY(180deg);    }    .card:hover .back {      transform: none;    }

    <div class="content">      <div class="card">              <div class="front">          <p>hello</p>        </div>            <div class="back">          <p>goodbye</p>        </div>      </div>    </div>

Why is `backface-visibility:hidden` not working on iframe?

You were missing transform-style:preserve-3d;?

Webkit Backface Visibility Not Working