Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webkit backface visibility not working

Tags:

css

webkit

I'm building a simple example to flip a card using the -webkit-transform: rotateY property.

It was working fine a couple of days ago, but all of a sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I'm using the -webkit-backface-visibility: hidden property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)

Here is the code in case I'm doing something terrible bad

<!DOCTYPE HTML> <html lang="en-US"> <head>     <meta charset="UTF-8">     <title>Card Flip Using CSS</title>     <style type="text/css">         body {             background-color: #3d994a;         }         h1 {             font-size: 30pt;             width: 100%;             margin: 0;             padding: 0;             text-align: center;             display: block;             text-shadow: 1px -1px 0px #4E4E4E;         }         #container {              -webkit-perspective: 1000;          }         .card {             position: relative;             width: 286px;             height: 392px;             -webkit-transform-style: preserve-3d;                        -webkit-transition: all 0.5s linear;                    }            #container:hover .card{             -webkit-transform: rotateY(180deg);         }         .face {             position: absolute;             width: 100%;             height: 100%;             -webkit-backface-visibility: hidden;             border-radius: 20px;                 border:1px solid #eee;             background-color: #FFF;             box-shadow: #000 3px 2px 4px;         }         .back {             -webkit-transform:rotateY(180deg);           }     </style> </head>  <body>     <h1>Hover over the card to flip it</h1>     <div id="container">         <div class="card">             <div class="front face">                             <img src="images/back.png" alt="" />             </div>             <div class="back face">                 <img src="images/front.png" alt="" />             </div>               </div>     </div> </body> </html> 

I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible. Also, this example uses this property and also stopped working. So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?

like image 309
dgiulian Avatar asked Sep 17 '11 14:09

dgiulian


1 Answers

Just put this -webkit-transform:rotateY(0deg);, you need to tell the browser which is the front face first.

like image 133
Sujay Shinoda Avatar answered Sep 16 '22 16:09

Sujay Shinoda