¡Atención! Para ver este video completo, inicia sesión con tu cuenta de Cursos o inscríbete en tu prueba gratuita de 7 días. Iniciar sesión Inscribirse
Vista previa
La compatibilidad del navegador es generalmente excelente para animaciones SVG con CSS. Sin embargo, existe un problema en Firefox con transform-origin y valores de porcentaje. Comúnmente verás esto referido como el "error de origen de transformación" en Firefox.
Actualizar
Si la rotación parece descentrada, aplica transform-box: fill-box a tu SVG, así:
.icono-engranaje,
.icono-martillo,
.icono-corazón {
transform-origin: 50% 50%;
transform-box: fill-box;
}
Puedes obtén más información sobre transform-box en MDN.
Referencia rápida
Videos relacionados
Compatibilidad del navegador
no hay muchas diferencias entre animaciones CSS en SVG e HTML.
0:00
Sin embargo, mientras estoy grabando este video, las implementaciones para
0:04
algunas características siguen siendo inconsistentes en algunos navegadores.
0:07
Particularmente en Firefox.
0:11
Ahora, hay un problema que ocurre en Firefox con el origen de transformación y
0:13
valores de porcentaje.
0:17
Comúnmente verás esto referido como el error de origen de transformación en Firefox.
0:19
Entonces, voy a previsualizar el área de trabajo del video anterior
0:24
en Firefox para ver si hay diferencias en las transformaciones.
0:28
Necesitas registrarte en Treehouse para descargar archivos del curso.
RegistrarseNecesitas registrarte en Treehouse para configurar Workspace.
Registrarse