Een kijkje in CSS3 2D-transformaties
De Transformatiemodule is een geweldige toevoeging in CSS3, het neemt de manier waarop we elementen op een website naar het volgende niveau manipuleren.
Er zijn enkele experimenten die me echt verbazen, voorbeelden zoals deze. We gaan echter niet iets bouwen als een pictogram voor alleen CSS dat op de een of andere manier kan veranderen in een Autobot, omdat het overweldigend kan zijn en ook niet echt bruikbaar in het echte leven..
In plaats daarvan zullen we deze keer teruggaan en de basisprincipes van CSS3 2D-transformaties bekijken om te zien hoe het werkt op een fundamenteel niveau.
De syntaxis
De CSS3 Transformations-module stelt ons in principe in staat om een element tot op zekere hoogte te transformeren, zoals vertalen, schalen, roteren en schuintrekken.
De officiële syntaxis is transformatie: methode (value). Net als andere CSS3-geweldige toevoegingen die zich nog in een vroeg stadium bevinden, hebben de huidige browsers nog steeds de syntaxisversie nodig om de transformaties uit te voeren. Dus de volledige syntaxis zou zo verlopen:
transformatie: methode (waarde); / * W3C officiële syntaxis * / -o-transform: methode (waarde); / * Opera 10.5+ * / -ms-transformatie: methode (waarde); / * Internet Explorer 9.0+ * / -moz-transform: methode (waarde); / * Firefox 3.6+ * / -webkit-transformatie: methode (waarde); / * Chrome / Safari 3.2+ * /
De methode waarnaar we hierboven verwijzen is ook de transformeren-functies, welke zou kunnen worden vervangen door een van de volgende: vertalen(), schaal(), draaien() of skew ().
De waarde
De meeste waarde van de methode komt overeen met de X-as en Y-as. Als je het Cartesiaanse coördinatenstelsel van je wiskundeles op de middelbare school onthoudt, is het basisprincipe vrij gelijkaardig, de X-as vertegenwoordigt de horizontaal lijn en de Y-as vertegenwoordigt de verticaal lijn.
Behalve voor rotaties. De omwenteling zal de gebruiken Pool coördinaten die wordt uitgedrukt in graden die variëren van 0 tot 360.
De waarden voor alle methoden kunnen zowel negatief als positief zijn. Maar let op, want de webpagina wordt van boven naar beneden opeenvolgend gelezen, waardoor de Y-as in het web het tegenovergestelde is van het oorspronkelijke principe van cartesiaanse coördinaten. Dit betekent dat wanneer u een negatieve waarde toevoegt aan Y-as, het zal in plaats daarvan naar de top gaan.
De transformaties gebruiken
Laten we nu de volgende basisdemonstratie bekijken om Transformatie in actie te zien.
Ik vertaal
Wees niet vertroebeld met de term vertalen, het zal geen vreemde taal vertalen. De vertalen hier is eigenlijk een methode om elementen in een bepaalde richting te verplaatsen.
De methode bevat twee waarden; X en Y. de X-waarde zoals we hierboven hebben aangegeven, zal het element horizontaal nemen; naar links of naar rechts, Terwijl de Y waarde neemt het verticaal naar de bodem of naar de top.
Laten we nu enkele eenvoudige demonstraties bekijken:
div width: 100px; hoogte: 100 px; transform: translate (100px, 250px);
Het bovenstaande fragment verplaatst het element 100px naar rechts en 250px naar de onderkant.
div width: 100px; hoogte: 100 px; transformeren: transleren (100px, 0);
Het bovenstaande fragment verplaatst het element precies naar rechts voor 100px, omdat we de Y-as op nul stellen. Als we het element vervolgens naar links willen verplaatsen, hoeven we de X-as alleen als negatief in te stellen, als volgt:
div width: 100px; hoogte: 100 px; transformeren: transleren (-100px, 0);
- "Vertalen" demo
Als alternatief kunnen we het element in één richting verplaatsen met deze individuele methoden; translateX () en translateY (), het verschil is dat elk van deze methoden slechts één waarde accepteert.
Dus, praktisch gezien, de transformeren: vertalen (-100px, 0) is ook gelijk aan transform: translateX (-100px).
II - Schaal
De schaal methode stelt ons in staat om vergroten of verkleinen de elementen van de werkelijke grootte. De waarde van de schaal is dezelfde als die van vertalen methode hierboven bevat het ook X en Y. Het enige verschil is dat we de eenheid niet specificeren. Hier is een voorbeeld:
div width: 100px; hoogte: 100 px; transformeren: schaal (1,5);
Het bovenstaande voorbeeld vergroot de div 1.5 of 150% van de werkelijke grootte, en omdat we het zowel voor de X- als de Y-richting op dezelfde manier schalen, hoeven we het slechts in één waarde te declareren. Je kunt het ook op deze manier declareren transformeren: schaal (1.5,1.5); als je meer details wilt, doet het gewoon hetzelfde.
Als we het element willen verkleinen, gebruiken we bovendien specifiek een waarde van 0,999 tot absolute 0, zoals het onderstaande voorbeeld, waardoor de div 50% of de helft kleiner wordt:
div width: 100px; hoogte: 100 px; transformatie: schaal (0,5);
Maar wees voorzichtig, als je de waarde instelt als absoluut “0” de div zal gewoon verdwijnen, dus tenzij je een geldige reden hebt om dit te doen, zou ik het niet aanraden om het te doen.
- "Scale" demo
III - Roteren
Zoals we eerder in dit bericht hebben vermeld, is het draaien methode gebruikt polaire coördinaten, dus de waarde wordt uitgedrukt in graden. Hier zijn twee voorbeelden
Het onderstaande fragment roteert het div 30 graden met de klok mee.
div width: 100px; hoogte: 100 px; transformeren: roteren (30 graden);
Een negatieve waarde, zoals geïllustreerd in het onderstaande voorbeeld, roteert de div in de tegenovergestelde richting (tegen de klok in) in dezelfde mate.
div width: 100px; hoogte: 100 px; transformeren: roteren (-30deg);
- Demo "Roteren"
IV - Schuintrekken
De scheef methode stelt ons in staat om een soort parallellogram te maken. Het bevat ook twee waarden van de X- en Y-as. De waarde zelf wordt echter in graden uitgedrukt, in plaats van lineaire metingen zoals we gebruiken voor de schaal of de vertalen methode. Hier is een voorbeeld:
div width: 200px; hoogte: 100 px; transform: skew (30deg, 10deg);
- "Skew" -demo
V - Meerdere methode
De transformeren eigenschap is niet beperkt tot slechts één methode, in feite kunnen we meerdere methoden opnemen in enkele declaraties, zoals deze:
div width: 100px; hoogte: 100 px; transform: translateX (100px) roteert (45deg);
Het bovenstaande fragment verplaatst het element 100 px naar rechts en roteert tegelijkertijd ook 45 graden.
"Multiple Method" -demo.
Transformeer Origin
De transfrom-oorsprong - zoals de naam al aangeeft - wordt gebruikt om het beginpunt van de transformatie te beheersen. Als we deze eigenschap niet expliciet verklaren met de volgende syntaxis transformatie-oorsprong: X Y;, dan neemt de browser de standaardwaarde die 50% is voor de X en 50% voor de Y.
Nu, als we het transformatie-oorsprong tot 0 (X) 0 (Y) start de transformatie linksboven.
Nogmaals, alle browsers hebben nog steeds de prefix-versie nodig om deze eigenschap te kunnen bellen. Dus, hier is de volledige versie om ervoor te zorgen dat deze werkt in de meeste huidige browsers:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; transformatie-oorsprong: X Y;
- "Transform-origin" demo
Conclusie
We hebben alle vier essentiële transformatiemethoden doorlopen; vertalen, schalen, roteren en scheeftrekken
Zoals gezegd, deze module bevindt zich nog in de beginfase, dus als u deze methoden op uw volgende website gaat toepassen, zorg dan dat deze gracieus verslechterd voor incompatibele browsers (ik verwijs hier niet naar IE6).
Ten slotte kunt u de demo bekijken of de bron downloaden via de volgende koppelingen.
- demonstratie
- Download de bron
