Pöörake pilti - CSS-trikid

Anonim

CSS-iga saate pilte ümber pöörata! Võimalik stsenaarium: „noole“ jaoks on ainult üks graafika, kuid selle ümber pööramine eri suundadesse suunamiseks.

.flip-horizontally ( transform: scaleX(-1); )

Vaadake, kuidas ühte noolt kasutatakse mõlema suuna suunamiseks:

Vaadake CodePeni lehel
CSS-Tricks (@ css-tricks) olevast pliiatsist Pildi
pööramine.

Pööramine on veel üks võimalus, mis tähendab, et meie üks nool võib minna palju suundi:

Vaadake CodePeni lehel
CSS-Tricks (@ css-tricks) olevast pliiatsist Pildi
pööramine.

See on ka ükskõik milline pilt või tegelikult ükskõik milline element.

Vaadake CodePeni lehel
CSS-Tricks (@ css-tricks) olevast pliiatsist Pildi
pööramine.

Vana hankija eesliited

Järglastele:

img ( -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; )