Bienvenido a la Comunidad de Treehouse
¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.
¿Buscas aprender algo nuevo?
Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de
Inicia tu prueba gratuita
giorgio gristina
Desarrollo Web Front End Graduado de Techdegree 13,839 Puntostransform-origin incorrecto
Hola a todos,
<!DOCTYPE html>
<html>
<head>
<title>Animación de SVG con CSS</title>
<link rel=stylesheet href=base.css>
<link rel=stylesheet href=style.css>
</head>
<body>
<svg xmlns=http://www.w3.org/2000/svg viewBox=60 60 240 240>
<g >
<circle class=star-bg fill=#40adcf stroke=#fff stroke-width=6 cx=180 cy=180 r=108.3/>
<ruta class=star fill=#fff stroke=#fff stroke-width=2 stroke-linecap=round stroke-linejoin=round d=M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z/>
</g>
</svg>
</body>
</html>
/* Completa el desafío escribiendo CSS a continuación */
.star-bg{
transition: fill 1s;
}
.star-bg:desplazamiento del ratón{
fill: azul acero;
}
.estrella:desplazamiento del ratón{
transformar: rotar(180grados);
}
.estrella{
transition: transformar .8s ;
transform-origin: 180px 180px;
1 Respuesta
Peter Vann
36,429 Puntos¡Hola Georgio!
La forma más segura de centrar transform-origin es usar 50% 50%.
Pero 180px 180px funciona igual de bien.
Obtienes un error por el espacio entre .8s y ; en la línea anterior (transition: transform .8s ;).
Esto funciona:
* Completar el desafío por escritura CSS debajo */
.star-bg{
transition: fill 1s;
}
.star-bg:desplazamiento del ratón{
fill: azul acero;
}
.estrella:desplazamiento del ratón{
transformar: rotar(180grados);
}
.estrella{
transition: transformar .8s;
transform-origin: 180px 180px;
Espero que eso ayude.
¡Manténgase seguro y feliz codificando!
giorgio gristina
Desarrollo Web Front End Graduado de Techdegree 13,839 Puntosgiorgio gristina
Desarrollo Web Front End Graduado de Techdegree 13,839 Puntosmuchas gracias de verdad Peter Vann¡realmente lo aprecio!