Conversor de colores
Convierte HEX, RGB y HSL con transparencia, previsualiza el color y copia valores CSS listos para usar.
Generador de transformaciones CSS 2D y 3D
Ajusta desplazamiento, giro, escala, inclinación y origen, con perspectiva y controles 3D opcionales.
Opciones 3D
Vista previa
El contorno discontinuo marca la posición original. El orden de las transformaciones afecta al resultado; el CSS usa el mismo orden que la vista previa.
CSS
Acerca de esta herramienta
Coloca o inclina un elemento comparándolo con su contorno original.
Cómo se usa
Configura desplazamiento X/Y, giro, escala por eje, inclinación y origen de transformación, comparando con el contorno inicial. Activa 3D para añadir perspectiva, desplazamiento Z y giros X/Y. Copia o descarga las declaraciones transform y transform-origin.
La vista previa y la salida emplean los mismos parámetros y un orden fijo; cambiar el orden de las funciones puede alterar el resultado. Las escalas negativas reflejan el elemento y una escala cero colapsa ese eje. La herramienta genera estilos, no modelos 3D ni animaciones completas.
Preguntas frecuentes
¿Puedo cambiar el orden de las funciones?
Puedes cambiar el orden editando a mano el CSS exportado; la interfaz no ofrece un control para reordenar funciones. Vista previa y exportación usan el mismo orden fijo, y cambiarlo puede alterar el resultado. Una escala negativa invierte el eje; cero lo aplana.
¿Por qué un elemento desplazado o escalado deja libre su espacio original?
Las transformaciones CSS cambian cómo se dibuja el elemento sin mover su caja original en el diseño. Por eso el contenido vecino mantiene su posición. Usa las reglas de diseño para gestionar los espacios y transform-origin para elegir el punto de referencia de la transformación visual.
Herramientas relacionadas
Se abre en una pestaña nueva
Comentarios
0