A CSS-ben a rotate transzformáció a kontextustól függően több különböző típusú forgatásra utalhat. Általában a transform tulajdonságon belül használják egy HTML-elem 2D-s vagy 3D-s elforgatásának megadására.
A következő módon használhatja a forgatás transzformációt a transform tulajdonságon belül:
2D forgatás:
Egy elem elforgatásához a 2D térben a forgatás funkciót használja. A funkció argumentumként egy szögértéket vesz fel, és elforgatja az elemet a középpontja körül.
.rotate-element {
transform: rotate(45deg);
}
Ebben a példában a .rotate-element osztály az elemet az óramutató járásával megegyező irányban 45 fokkal elforgatja.
3D forgatás:
A 3D-s elforgatáshoz a rotateX, rotateY vagy rotateZ függvényeket használja. Ezek a függvények lehetővé teszik egy elem elforgatását az X, Y vagy Z tengely körül a 3D térben.
Íme egy egyszerű példa a perspektíva használatára egy 3D-transzformált elemmel:
.rotate-3d-element {
transform: rotateX(45deg);
}
Ez a példa az elemet az X-tengely körül 45 fokkal elforgatja a 3D térben.
Egyéni átalakítási funkciók:
Az elforgatás transzformációt egyéni transzformációs függvények részeként is használhatja, amelyek több transzformációt is tartalmazhatnak, például skálázást, transzlációt és elforgatást.
.custom-transform-element {
transform: translateX(50px) rotate(30deg) scale(1.5);
}
Ebben az esetben a .custom-transform-element osztály az elemet vízszintesen 50 pixellel átfordítja, 30 fokkal elforgatja és eredeti méretének másfélszeresére méretezi.
Ezek az átalakítási funkciók lehetővé teszik, hogy különböző forgási effektusokat hozzon létre az elemek számára, mind a 2D-s, mind a 3D-s térben, dinamikus vizuális elemeket adva a weboldal tervezéséhez.
Nyelv kiválasztása
Téma beállítása
© 2024 ReadyTools. Minden jog fenntartva.