El giro diagonal 3d no funciona
Tengo una página con un montón de cajas en él. Hay cuatro tipos de caja. Quiero 4 transiciones css3 diferentes.
Cuadro 1: voltea el eje Y al pasar el mouse <- esto funciona perfectamente
Cuadro 2: voltea el eje X al pasar el mouse <- esto funciona perfectamente
Cuadro 3: efecto de desvanecimiento al pasar el mouse <- esto funciona perfectamente
Cuadro 4: voltear en el eje X e Y en diagonal al pasar el mouse <- esto funciona al principio y luego no
Cada caja tiene el mismo marcado:
<div class="box box-4">
<div class="inner-container">
<div class="front"><img src="some_pic.jpg"></div>
<div class="back">
<div class="tools"><!-- some links and stuff --></div>
</div>
</div>
</div>
Entonces, cuando el cuadro 4 comienza, se ve perfecto, el frente está hacia arriba, la parte posterior está oculta, como debería ser. Cuando se desplaza sobre él, la animación comienza a la derecha, gira en un eje diagonal (esquina superior izquierda a esquina inferior derecha), pero luego, cuando la animación termina, el frente (que debería estar visible detrás de la espalda pero invertido) es perpendicular a la espalda!
He modificado los valores de CSS de todas las formas imaginables, he visto un montón de demostraciones, ¿qué está mal?
CSS:
.box-4 { -webkit-perspective:1200px; }
.box-4 .inner-container {
width:100%; height:100%; position:relative;
-webkit-ransition:all 0.4s ease-in-out;
-webkit-transform-style:preserve-3d;
}
.box-4 .back {
width:100%; height:100%; position:absolute; top:0; left:0;
background-color:rgba(0,0,0,.6);
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
}
.box-4:hover .inner-container { -webkit-transform:rotate3d(45,45,0,180deg); }
.box-4 .back { -webkit-transform:rotate3d(45,45,0,-180deg); }
Nota: Estoy mostrando solo los estilos -webkit- aquí para simplificar, pero en mi CSS real tengo -moz-, -o-, -ms- y las variantes regulares sin prefijo también...
preguntado el 27 de julio de 12 a las 14:07
danwellman
1 Respuestas
Bueno, eh... Conseguí que funcionara cambiando el CSS para el anverso y el reverso mientras mantenía los colores para esos dos, además de eliminar la transformación de lo que alguna vez fue el reverso y ahora es el anverso. (La transformación fue lo primero que descubrí, porque en su original, la transformación en la parte posterior simplemente se deshacía con la transformación de desplazamiento, orientándola como lo haría normalmente (alineada horizontalmente), pero una vez que eliminé los colores eran cambiado por alguna razón.)
No estoy seguro de si funcionará en los navegadores que usan -webkit- (Safari y Chrome, ¿creo?) en lugar de -moz-, Sin embargo.
Con la aclaración sobre cómo desea la orientación final, aquí hay una que creo que ahora debería funcionar de la manera que desea. Simplemente cambié un poco las cosas, agregué la transparencia e incluí una operación de escala en la transformación de desplazamiento para ir con la rotación.
Una rotación adicional de 90 grados en el eje z también funcionaría ( http://jsfiddle.net/6KLYs/7/), pero creo que la escala se ve mejor.
Respondido 27 Jul 12, 17:07
gracias, curiosamente en firefox tengo el mismo problema pero al revés, por lo que hay partes rosadas que sobresalen de la parte superior e inferior:/ Sin embargo, también necesito que funcione en Chrome. Supongo que si no puedo hacer que funcione, tendré que ir con uno de los otros animadores, pero debería funcionar, he visto demostraciones similares que funcionan en Chrome... - danwellman
Teniendo en cuenta que la mayoría de los navegadores simplemente ignorarán los atributos CSS que no reconocen (aunque Firefox, al menos, imprime advertencias sobre ellos en la consola de errores), creo que podría incluir varios conjuntos diferenciados para los distintos navegadores que usan esos -moz, -webkit, etc. prefijos. ¿Qué sucede cuando intentas usarlo en Chrome (con -moz cambiado de nuevo a -webkit, por supuesto)? - JAB
Sí, estoy usando todos los prefijos (cuando digo todos, me refiero a los regulares), simplemente los omití para que el CSS sea legible y no solo un gran bloque de código monolítico. El mismo problema con su violín que con Firefox, bits rosas arriba y abajo: danwellman
"Pedacitos rosas arriba y abajo". Supongo que hay algún problema con rotate3D en ciertos navegadores y versiones de navegador, como si los divs tuvieran la misma orientación para empezar, deberían rotar juntos, ya que es el contenedor el que gira, no los divs delantero/trasero. Sin embargo, a modo de aclaración: ¿el comportamiento que desea para el rectángulo anteriormente azul, más ancho que alto, se vuelve más alto que ancho y rosa cuando se pasa el mouse sobre él? - JAB
No del todo, tanto la parte delantera como la trasera deben ser rectangulares, más anchas que altas. He usado esta página como referencia (¡junto con muchas otras!): css3playground.com/flip-card.php la única diferencia es que los suyos son cuadrados, mientras que yo necesito rectángulos. Entonces, cuando se carga la página, debería poder ver el frente pero no la espalda en absoluto. Al pasar el mouse, debe hacer una transición para que pueda ver la parte posterior y, debido a que la parte posterior es opaca, puede ver el frente detrás de pero sin asomarse por encima y por debajo - danwellman
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas css css-transforms or haz tu propia pregunta.
Podría hacerlo, podría tomar un poco de tiempo... - danwellman
ok, aquí hay un violín: jsfiddle.net/6KLYs/1 no es 100% fiel porque no puedo hacer que el frente ni siquiera se voltee por alguna razón. Así que ignore el hecho de que el cuadro azul no se voltea, lo hace en mi página real. Pero puedes ver cuando la caja rosada se vuelve a la vista, tiene las partes azules sobresaliendo por arriba y por abajo... - danwellman
El azul en realidad se voltea cuando se usa Firefox (reemplazando
webkitmozen el CSS), pero sí, veo tu problema. - JAB