¿Cómo escalar y traducir 3D al mismo tiempo?
Pregunta
Tome este ejemplo:
@-webkit-keyframes slideInViewport {
from{
-webkit-transform: scale(1);
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: scale(0.8);
-webkit-transform: translate3d(250px, 0, 0)
}
}
Esto da como resultado que el div primero se traslade 250 px a la izquierda y luego se escale.¿Cómo puedo hacer que se traduzca en 3D al mismo tiempo que se escala?
He logrado esto animando en el left
propiedad, pero eso resulta en un rendimiento muy pobre.
Solución
La solucion es:Ponlos todos en una línea.
@-webkit-keyframes slideInViewport {
from{
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
to{
-webkit-transform: scale(0.8) translate3d(250px, 0, 0);
}
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow