Properti offset CSS

Definisi dan penggunaan

offset Atribut digunakan untuk menganimasikan elemen sepanjang jalur, dan ini adalah bentuk singkat dari berbagai atribut berikut:

Bergantung kepada pengaturan offset Bentuk yang berbeda dari nilai atribut, lihat contoh lebih banyak di bawah ini.

Penggunaan offset Atribut singkat untuk mengatur nilai offset-path, offset-distance dan offset-rotate untuk elemen <img>:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Gunakan elemen <img> untuk offset Pengaturan nilai atribut offset-path dan offset-rotate:

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

Gunakan elemen <img> untuk offset Pengaturan nilai atribut offset-path dan offset-distance:

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

Gunakan elemen <img> untuk offset Atur nilai properti offset-path, offset-distance, offset-rotate, dan offset-anchor:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

offset: auto|value|initial|inherit;

Nilai	Deskripsi
auto	Default. Lihat nilai default untuk setiap properti 'offset-' yang terpisah.
offset-anchor	Tentukan titik yang tetap di jalur animasi elemen. Nilai defaultnya adalah auto.
offset-distance	Tentukan jarak dari titik awal jalur yang ditentukan oleh offset-path. Nilai defaultnya adalah 0.
offset-path	Tentukan jalur animasi elemen. Nilai defaultnya adalah none.
offset-position	Tentukan posisi awal elemen sepanjang jalur. Nilai defaultnya adalah normal.
offset-rotate	Tentukan sudut putar saat elemen di-animasikan sepanjang jalur. Nilai defaultnya adalah auto.
initial	Setel atribut ini ke nilai defaultnya. Lihat initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat inherit.

Nilai default:	Lihat nilai default untuk properti individu
Inheritance:	Tidak
Produksi animasi:	Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi:	CSS3
Grammar JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"