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.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 46 | 72 | No | 79 | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | No |
A partir de Chrome 46 y Opera 33 (y las versiones móviles relacionadas), tenemos "soporte inicial" en Blink (sin bandera).
información adicional
- Especificación: Especificación de nivel 1 del módulo Motion Path
- Colección de ejemplos en CodePen
- Uso futuro: CSS Motion Paths por Dan Wilson
- Boleto de WebKit # 139128
- Boleto de Mozilla # 1186329
- Solicitud de función de Microsoft Edge
- Estado de la plataforma Chrome: ruta de movimiento CSS y muestra
- MDN: offset (enlaces a otras propiedades relacionadas)
