css - propiedades - webkit firefox
La visibilidad de la cara posterior de Webkit no funciona (7)
Curiosamente, si configura la opacidad a algo que no sea 1 (digamos, .99), de repente la visibilidad de la cara posterior entrará en vigor.
Estoy construyendo un ejemplo simple para voltear una tarjeta usando la -webkit-transform: rotateY .
Funcionó bien hace un par de días, pero de repente dejó de funcionar. El efecto aún funciona, pero cuando sobrevivo la carta, el anverso desaparecerá para hacer visible el reverso. para esto estoy usando -webkit-backface-visibility: hidden propiedad -webkit-backface-visibility: hidden . Pero parece que ya no funciona en Chrome (tanto en el establo como en la versión de construcción nocturna)
Aquí está el código en caso de que esté haciendo algo terriblemente malo
<!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, la propiedad oculta de la cara posterior y aún era visible. Además, este ejemplo usa esta propiedad y también dejó de funcionar. Entonces, para resumir, mi pregunta es, ¿alguien más tiene problemas con esta propiedad o hay un problema con mi código?
He encontrado este problema en múltiples versiones de Chrome en Windows XP, incluido Chrome 24.
Esto lo solucionó:
Abra el editor de indicadores de Chrome a través de esta URL:
chrome://flags/Habilite la siguiente configuración:
Anular lista de reproducción de software Anula la lista de reproducción de software incorporada y habilita la aceleración de GPU en configuraciones de sistema no compatibles.
- También asegúrese de que las animaciones CSS aceleradas estén habilitadas.
El hecho de que esto resolvió el problema sugiere que Chrome considera que mi sistema es un "sistema no compatible". Como tal, su millaje puede variar dependiendo de la impresión de Chrome de su sistema.
Leí en alguna parte que se trata de algo relacionado con la potencia de la GPU de la computadora host. Esto funciona para mí en todos los dispositivos que tienen una GPU decente. La prueba de esto es el hecho de que no funciona para mí en un Dell Mini, incluso después de una instalación de SO fresca (win8) y en una máquina XP vieja. El problema es que la visibilidad de back-face está ahí, pero no se llama, lo que significa que no puedo usar javascript para detectar esto.
Busque http://amproductions.org
Parece que no es muy estable en Mac, dejé Chrome por un par de horas con la página con la animación funcionando y cuando volví atrás, la visibilidad simplemente deja de funcionar. El reinicio de Chrome ayudó a resolver el problema.
Si ha probado todas las demás opciones aquí y no funcionó nada mientras este ejemplo funciona en su navegador, asegúrese de que el elemento correspondiente a #card en el siguiente ejemplo tenga overflow:visible :
<div id="container">
<div class="card">
<div class="front face"></div>
<div class="back face"></div>
</div>
</div>
Simplemente ponga esto -webkit-transform:rotateY(0deg); , primero debe indicarle al navegador cuál es la cara frontal.
Tuve un problema similar con los niños con dicho elemento cuando un niño tenía una webkit-transform . Noté que también tuve que establecer la visibilidad de la cara posterior en ese elemento:
<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>
Entonces la solución es usar también:
#div2 {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden; /* again */
}