Offset-rotar - Trucos CSS | Almanaque CSS 2024

Esta propiedad comenzó su vida como motion-rotation, luego se convirtió offset-rotation, ahora es offset-rotate. Sigue siendo una propiedad experimental de Borrador de trabajo, así que ?‍♀️. Si lo va a usar, también puede usar lo que sea más reciente.

La offset-rotatepropiedad en CSS controla el ángulo de un elemento dependiendo de su a lo offset-distancelargo de a offset-path.

Imagina que el elemento que se anima a lo largo de un camino es un pequeño coche de carreras. A medida que el auto de carreras se mueve a lo largo del camino, realmente necesita girar para que la parte delantera del auto mire en la dirección en la que se mueve, de lo contrario, se verá extraño y antinatural. Afortunadamente, el valor predeterminado para offset-pathes autocuál hace exactamente eso.

Vea esta demostración:

Vea el
coche Pen scalextric en motion-path por Chris Coyier (@chriscoyier)
en CodePen.

Valores posibles

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Soporte de navegador

Las offset-*propiedades todavía se consideran una característica experimental en el momento de escribir este artículo. Si la falta actual de compatibilidad con el navegador hace que no se atreva a usarlo en un proyecto, es posible que desee considerar el uso de GSAP para este nivel de animación. Esto le ofrecerá la más amplia compatibilidad con navegadores en este momento.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.