En CSS3, las animaciones se introdujeron bajo varios prefijos de proveedor, con las propiedades de transición. Ahora, al menos en CSS puro, hay dos formas de hacer que un elemento cambie de posición.¿Para qué sirve la transformación CSS: la propiedad translate()?
- Ajuste de la posición del elemento como absoluto y el violín con
left:right:top:ybottom: - Usando
-vendor-transform:translate(X,Y,Z)
Ahora, estrictamente en el punto de transform:translate(), aparte de la propia capacidad de utilizar translateZ(), el único la diferencia entre ellos es que este último no es un valor informado; aparte de analizar la propiedad en sí, la traducción no es un estilo calculado. Sin embargo, si esto no fuera necesario, es la última mejor opción para elementos de animación y posicionamiento que de otra manera estarían en una configuración position:fixed?
Estoy particularmente interesado en hacer una aplicación web bastante pesada que necesite ejecutarse tanto en dispositivos móviles como en navegadores, por lo que la compatibilidad con versiones anteriores no es tanto un problema. Los navegadores móviles en estos días tienden a ser al menos 'modernos'.
Así que en última instancia, mi pregunta es, ¿para qué exactamente es transform:translate(), de acuerdo con los creadores de las especificaciones de CSS3? ¿Dónde se diseñó para ser utilizado sobre transformaciones LRTB, y sería posible utilizarlo de una manera apreciablemente superior en aras de la velocidad de renderizado, la suavidad de la animación y la estabilidad visual cuando se emplea aceleración de hardware (-webkit-transform: translateZ(0);) ? Para aquellos que no lo sepan, a veces los elementos del webkit pueden parpadear en entornos acelerados por hardware.
En cualquier caso, solo estoy buscando las mejores y más actualizadas soluciones de diseño para mis aplicaciones web que puedan aprovechar la CPU y la GPU de manera más efectiva para que puedan funcionar con FPS muy bien optimizado (en cuanto a transiciones y, en algunos casos, desplazamiento) Un gran ejemplo del tipo de suavidad que sería más deseable es este http://www.webkit.org/blog-files/leaves/ (sí, leí su fuente)
¿Alguna entrada?
posible duplicado de [¿Cuál es la diferencia entre CSS3 traducir método y CSS2 posicionamiento relativo? ] (http://stackoverflow.com/questions/10007093/whats-the-difference-between-css3-translate-method-and-css2-relative-positionin) – Blender
Sé la diferencia, quiero saber sus propósitos sobre el otro. – TERMtm
No hay propiedad 'translate' * *. Hay una función 'translate' ** para la propiedad' transform' que es una transformación de matriz, que permite la manipulación 2D y 3D (traducir, rotar, sesgar). – zzzzBov