Proprietà offset-anchor CSS

Pagina precedente offset
Pagina successiva offset-distance

Definizione e uso

offset-anchor L'attributo specifica l'elemento fisso sul offset-path i punti sulla traiettoria definita dall'attributo.

Se si utilizza offset-rotate Se si ruota l'elemento con l'attributo offset-anchor Il punto definito dall'attributo dell'animazione diventerà anche il centro di rotazione.

Esempio

Fissa il punto centrale destro dell'elemento <img> sulla traiettoria definita:

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

Prova personalmente

Sintassi CSS

offset-anchor: auto|value|initial|inherit;

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. L'ancora si trova al centro dell'elemento, equivalente al valore dell'attributo 50% 50%.
left top left center left bottom right top right center right bottom center top center center center bottom	Se si specifica solo una parola chiave, l'altro valore sarà "center".
xpos ypos	Il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale. L'angolo in alto a sinistra è 0 0. L'unità può essere pixel (0px 0px) o qualsiasi altra unità CSS. Se si specifica solo un valore, l'altro valore sarà 50%. È possibile utilizzare sia % che posizioni in modo misto.
x% y%	Il primo valore è la posizione orizzontale, il secondo valore è la posizione verticale. L'angolo in alto a sinistra è 0% 0%. L'angolo in basso a destra è 100% 100%. Se si specifica solo un valore, l'altro valore sarà 50%. Il valore predefinito è: 50% 50%.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Inherita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Produzione animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.offsetAnchor="bottom right"