Video: CSS Efecto - 05 Triangulo Lateral @JoseCodFacilito 2025
CSS3 indeholder evnen til at anvende geometriske transformationer på ethvert element i din HTML5 webside. Dette giver et bemærkelsesværdigt niveau af visuel kontrol, der ikke tidligere er tilgængelig for webudviklere.
Transformatattributten giver dig mulighed for at anvende en matematisk transformation til enhver div. Når du anvender transformation til et element, skal du anvende et eller flere af følgende parametre for at beskrive transformationstypen:
-
translate : Flytter objektet fra dets standardposition. Oversættelse kræver to parametre, en X måling og en Y måling. Brug standard CSS måleenheder.
-
rotere : Roter billedet omkring dets midterste værdi. Tager en parameter, en vinkelmåling i grader. (For eksempel er 30 grader 30deg.)
-
skala : Ændrer objektets størrelse. Standardversionen ændrer både vandret og lodret størrelse ensartet. Skalerne og skalaegenskaberne kan bruges til at justere skalaen langs en enkelt akse. Skalaen måles i standard CSS måleenheder. Hvis skalaen er større end 1, er objektet større end originalen. En skala mellem nul og en gør varen mindre end den var.
-
skew : Dette giver dig mulighed for at vippe elementet med en vis vinkel. Parameteren kræver en vinkelmåling i grader. De skewx og skewy variationer giver mulighed for mere fuldstændig kontrol af transformationen.
Du kan kombinere flere parametre ved at notere dem efter transformationskendetegnet adskilt af mellemrum.
For at illustrere forestill dig følgende HTML-kodestykke:
boks 1 boks 2 boks 3 boks 4 boks 5
Koden viser fem identiske divs. Til illustrationer deler alle divs samme fælles CSS:
# box1, # box2, # box3, # box4, # box5 {bredde: 100px; højde: 80px; border: 3px solid black; baggrundsfarve: gul;}
Anvend variabler af attributten til hvert element for at se, hvordan transformationerne virker.
# box2 {transform: translate (100px, 0px);} # box3 {transform: roter (45deg);} # box4 {transform: skala (2) oversæt (100px, 0px);} # box5 {transform: skew (3);}
Bemærk, at browsersupporten ændrer sig på dette element. Chrome og Safari forventer stadig -webkit-præfiks, men Firefox og Opera understøtter ikke-præfikset version. IE 10 virker teoretisk med standardversionen, men version 9 kræver -ms-præfiks, og tidligere versioner af IE ignorerer ganske enkelt transformationer helt og holdent. Hvis du ser den aktuelle kildekode for transformen.html site, vil du se flere versioner til at håndtere de forskellige browsere:
# box2 {transform: translate (100px, 0px); -webkit-transform: translate (100px, 0px); -ms-transform: translate (100px, 0px);}
Til sidst vil sund fornuft bryde ud, og leverandørspecifikke præfikser er ikke længere nødvendige, men det er for tiden sikkert at sætte dem på plads. Hvis du vil fange ældre versioner af Firefox og Opera, kan du også inkludere disse (-moz- og -o-) præfikser.
