Átalakulás-eredet - CSS-trükkök

A transform-origintulajdonságot CSS-transzformációkkal együtt használják, lehetővé téve a transzformáció kezdőpontjának megváltoztatását.

.box ( transform: rotate(360deg); transform-origin: top left; )

Amint a fentiekben jeleztük, a transform-origintulajdonság két szóközzel elválasztott kulcsszó- vagy hosszúságértéket vehet fel egy 2D transzformációhoz, és legfeljebb három értéket egy 3D transzformációhoz.

A fenti kód 200 x 200 képpontos mezőben történő használata, a kattintásesemény használatával átállított transzformációra a következőképpen viselkedne:

Nézze meg ezt a tollat!

Alapértelmezés szerint a transzformáció eredete „50% 50%”, amely pontosan az adott elem közepén található. Az eredet bal felső részre változtatása (mint a fenti bemutatóban) azt eredményezi, hogy az elem az elem bal felső sarkát használja elforgatási pontként.

Az érték lehet hosszúságú százaléka vagy a kulcsszavakat top, left, right, bottom, és center.

Az első érték a vízszintes helyzet, a második a függőleges, a harmadik pedig a Z tengely helyzetét jelenti. A harmadik érték csak akkor működik, ha 3D-s átalakításokat használ, és ez nem lehet százalékos.

Lásd Shaw (@shshaw) toll-transzformációs eredetét a CodePen-en.