CSS: обратная видимость не работает?

Question

Я пытаюсь создать эффект сбрасывания карты, но я не могу получить backface-visibility: hidden;. Что я делаю не так?

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

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

Answer 1

Вместо поворота родителя, вы должны вращаться обе стороны индивидуально.

.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>

Answer 2

Here является хорошим примером того, как сделать флип карты ...

CSS:

.content { 
    perspective: 1000; 
} 

.content:hover .card { 
    transform: rotateY(180deg); 
} 

.content, .front, .back { 
    width: 300px; 
    height: 450px; 
} 

.front, .back { 
    border: 1px solid black; 
    background: green; 
} 


.card { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

.front, .back { 
    backface-visibility: hidden; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

.content:hover .card { 
    transform: rotateY(180deg); 
} 

Answer 3

http://jsfiddle.net/tj3eacxL/

Ваш оригинальный CSS находится на самом верху. Необходимые изменения:

.card { 
    -webkit-transform-style: preserve-3d; 
    background: none; /* Apply a background colour to the whole card to cover up the faces */ 
} 
.back { 
    transform: rotateY(180deg); /* because the back should be flipped initially when it's in the back */ 
} 
.front, .back { 
    background-color: green; 
}