Atributo offset-position de CSS

Página anterior offset-path
Página siguiente offset-rotate

Definición y uso

offset-position La propiedad especifica la posición inicial del elemento en la trayectoria.

Si offset-path Si la función no especifica su propia posición de inicio, offset-position El valor determina la posición inicial del elemento mientras se mueve a lo largo de la trayectoria de desplazamiento.

Ejemplo

Ejemplo 1

La posición inicial del elemento especificado debe ser en la esquina inferior derecha:

#square {
  width: 60px;
  height: 60px;
  background: azul;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Pruebe usted mismo

Ejemplo 2

Ver diferentes posiciones de inicio de desplazamiento:

#square1 {
  width: 40px;
  height: 40px;
  background: rosa;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: rojo;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: amarillo;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: turquesa;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavanda;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Pruebe usted mismo

Sintaxis de CSS

offset-position: auto|normal|position|initial|inherit;

Valor del atributo

Valor	Descripción
normal	Establece la posición de inicio del desplazamiento en el 50% 50% del contenedor. Valor predeterminado.
auto	Establece la posición de inicio del desplazamiento en la esquina superior izquierda del cuadro del elemento.
position	Especifique un par de coordenadas x/y para colocar el elemento en relación con el borde de su cuadro. Se pueden usar de 1 a 4 valores para definir la posición.
initial	Establece este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	normal
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.offsetPosition="auto"