La visibilidad de la cara posterior de Webkit no funciona
Estoy construyendo un ejemplo simple para voltear una tarjeta usando la propiedad -webkit-transform: rotateY.
Estaba funcionando bien hace un par de días, pero de repente dejó de funcionar. El efecto todavía funciona, pero cuando cierro el cursor sobre la tarjeta, la parte frontal debe desaparecer para hacer visible la parte posterior. para esto estoy usando la propiedad -webkit-backface-visibility: hidden. Pero parece que ya no está funcionando en chrome (Tanto en el estable y la versión nightly build)
Aquí está el código en caso de que esté haciendo algo 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>
Llegué a esta conclusión porque hice un par de ejemplos simples usando solo un div rotado con un texto simple en él, la propiedad backface hidden y todavía era visible. Además, este ejemplo usa esta propiedad y también dejó de funcionar. Así que, para resumir, mi pregunta es, ¿alguien más tiene problemas con esta propiedad, o hay un problema con mi código?
7 answers
Tuve un problema similar con los hijos de tal elemento cuando un hijo tenía un webkit-transform.
Noté que tenía que establecer la visibilidad de la cara posterior en ese elemento también:
<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>
Así que la solución es usar también:
#div2 {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden; /* again */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-27 15:54:02
Simplemente ponga esto -webkit-transform:rotateY(0deg);, primero debe decirle al navegador cuál es la cara frontal.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-10 17:17:24
Si ha probado todas las demás opciones aquí y nada funcionó mientras este ejemplo funciona en su navegador, asegúrese de que el elemento correspondiente a #card del siguiente ejemplo tenga overflow:visible:
<div id="container">
<div class="card">
<div class="front face"></div>
<div class="back face"></div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-24 14:26:40
Curiosamente, si se establece la opacidad a cualquier cosa que no sea 1 (por ejemplo, .99), de repente la visibilidad de la cara posterior entrará en vigor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-14 12:03:27
He encontrado este problema en varias versiones de Chrome en Windows XP, incluyendo Chrome 24.
Esto lo arregló:
-
Abra chrome flag editor a través de esta URL:
chrome://flags/ -
Habilite la siguiente configuración:
Anular la lista de renderizado de software Anula la lista de renderizado de software integrada y habilita la aceleración de GPU en sistemas no compatibles configuraciones.
- También asegúrese de que las animaciones CSS aceleradas estén habilitadas.
El hecho de que esto resolvió el problema sugiere Chrome considera mi sistema un "sistema no compatible". Como tal, su kilometraje puede variar dependiendo de la impresión de Chrome de su sistema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-07 19:33:17
He leído en alguna parte que tiene algo que ver con el poder GPU de la pc host. Esto funciona para mí en todos los dispositivos que tienen una GPU decente. Prueba de esto es el hecho de que no funciona para mí en un Dell Mini, incluso después de una instalación del sistema operativo nuevo (win8) y en una antigua máquina XP. El problema es, back-face-visibility está ahí, pero no se llama, lo que significa que no puedo usar javascript para detectar esto.
Comprobar http://amproductions.org
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-23 19:57:46
Parece que no es muy estable en Mac, dejé Chrome durante un par de horas con la página con animación de trabajo y cuando volví atrás-visibilidad acaba de dejar de trabajar. Chrome restart ayudó a resolver el problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-07 22:52:24