Generador de Transformaciones CSS

Las transformaciones 2D operan solo en los ejes X e Y, afectando las dimensiones de ancho y alto. Incluyen rotar, escalar, inclinar y mover. Las transformaciones 3D añaden el eje Z para la profundidad, permitiendo que los elementos parezcan rotar en un espacio tridimensional. Propiedades como rotateX y rotateY inclinan los elementos hacia o lejos del espectador. Las transformaciones 3D requieren un valor de perspectiva en el elemento padre o en el elemento mismo para crear la ilusión de profundidad. Sin perspectiva, las rotaciones 3D aparecen planas. Tanto las transformaciones 2D como las 3D se pueden combinar en una única propiedad de transformación.

El origen de transformación establece el punto alrededor del cual se aplican las transformaciones. Por defecto es el centro del elemento (50% 50%). Cambiarlo a la esquina superior izquierda (0% 0%) hace que las rotaciones giren desde la esquina en lugar del centro. Esto cambia drásticamente cómo se ven rotar, escalar e inclinar. Por ejemplo, rotar 45 grados desde el centro gira el elemento en su lugar, pero rotar desde la esquina superior izquierda lo balancea como una puerta. El origen acepta palabras clave (superior, centro, inferior, izquierda, derecha), porcentajes o valores de píxeles para un control preciso.

La perspectiva define la distancia entre el espectador y el plano Z, creando la ilusión de profundidad para las transformaciones 3D. Un valor más pequeño como 200px crea una perspectiva de primer plano extrema donde los efectos 3D se ven dramáticos y distorsionados. Un valor más grande como 2000px crea una perspectiva sutil y distante. La perspectiva se puede establecer en el elemento padre como una propiedad (perspective: 800px) o en el propio elemento como una función de transformación (transform: perspective(800px)). El método del padre se prefiere cuando varios elementos hijos comparten el mismo espacio 3D.

En 2026, los prefijos de proveedor para las transformaciones CSS rara vez son necesarios. La propiedad transform sin prefijo es compatible en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y navegadores móviles. El prefijo -webkit-transform se requería para versiones antiguas de Safari e iOS antes de Safari 9 (2015). Si necesita admitir navegadores muy antiguos, este generador puede incluir prefijos de proveedor como un comentario en la salida. Para la mayoría de los proyectos dirigidos a navegadores actuales, la versión sin prefijo es suficiente y el código es más limpio sin prefijos.