In dit artikel zullen we Transform In begrijpen in detail en volg het op met een gedetailleerde praktische demonstratie. De volgende tips komen in dit artikel aan bod:
Met de vooruitgang in de websitefunctionaliteiten is het net zo belangrijk om slimme integraties op uw website aan te bieden om deze aantrekkelijk en beter te maken. Het toevoegen van verschillende CSS-elementen die uw site aanvullen, is de behoefte van het uur.
Mensen blijven weg van websites die de massa niet echt aanspreken. Dus, hoe zit het met het proberen om sommige elementen te transformeren en uw CSS te verfraaien met een lagere compressiewaarde.
Om aan vergelijkbare behoeften te voldoen, hebben we de eigenschap transform CSS die elementen transformeert door ze scheeftrekken, roteren, schalen of vertalen.
Verderop met dit artikel over Transform In CSS
Wat is CSS transformeren?
Het transformeren van een CSS-element betekent dat het een voorsprong in 2D- of 3D-vorm krijgt. Het verandert visueel de stijl van een element.
2D-transformatie werkt op X- en Y-assen. U kunt elke rand of structuur op beide assen aanbrengen om wijzigingen aan te brengen. Terwijl het voor 3D-transformatie moet werken op X-, Y- en Z-assen om de benodigde diepte te bieden.
CSS 2D-transformatie-eigenschappen:
| Functie | Omschrijving |
Matrix( n, n, n, n, n, n ) | Matrix van zes waarden |
vertalen( x, y ) | Hiermee kan het element langs de X- en Y-as bewegen |
translateX ( n ) | Hiermee kan het element langs de X-as bewegen |
vertalenY ( n ) | Hiermee kan het element langs de Y-as bewegen |
schaal( x, y ) | Verandert de breedte en hoogte van de elementen |
schaalX ( n ) | Verandert de breedte van het element |
schaalY ( n ) | Verandert de hoogte van een element |
draaien( hoek ) | Maakt het mogelijk om het element te roteren in een hoek die is gespecificeerd in de parameter |
scheef ( x-hoek, y-hoek ) | Zet het element scheef langs de X- en Y-as |
skewX ( hoek ) | Zet het element scheef langs de X-as |
scheef ( hoek ) | Schuift het element langs de Y-as |
CSS 3D-transformatie-eigenschappen:
Eigendom | Omschrijving |
transformeren | Past een 2D- of 3D-transformatie toe op een element |
transform-origin | Hiermee kunt u de positie op getransformeerde elementen wijzigen |
transform-stijl | Specificeert hoe geneste elementen worden weergegeven in 3D-ruimte |
perspectief | Specificeert het perspectief van hoe 3D-elementen worden bekeken |
perspectief-oorsprong | Specificeert de onderste positie van 3D-elementen veranderlijk en onveranderlijk in java |
backface-zichtbaarheid | Bepaalt of een element al dan niet zichtbaar moet zijn wanneer het niet naar het scherm is gericht |
Bijvoorbeeld:
css .element {breedte: 20 px hoogte: 20 px transform: schaal (20)}Als u dit nu doet, wordt het gedefinieerde element 20 keer geschaald.
Niet alleen dit, u kunt ook asgewijs schalen voor horizontaal schalen en verticaal schalen.
transform: scaleX (2) transform: scaleY (.5)
Om voor alle browsers een juiste transformatie te bieden, kunt u:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}De eigenschap transform CSS verbetert de coördinatenruimte van het visuele CSS-opmaakniveau.
Wat is het visuele opmaakniveau?
Visueel opmaakniveau betekent een document verwerken en visueel presenteren op de mediaplatforms. Met visuele opmaak kunt u elk element transformeren tot een model dat overeenkomt met het CSS-boxmodel. CSS-boxmodel definieert een element in een standaard rechthoekig box-formaat dat de grootte, positie en eigenschappen definieert.
Opmerking: Alleen transformeerbare elementen kunnen worden getransformeerd.
Verderop met dit artikel over Transform In CSS
Wat zijn de verschillende transformatie-eigenschappen?
Laten we eens kijken naar alle transformerende eigenschappen:
1. schaal (): Schalen betekent om de grootte van het element horizontaal of verticaal te wijzigen.
Voor verticaal schalen:scaleX
Voor horizontale schaalverdeling:schaalY
Voor een element kunt u ook de lettergrootte, opvulling, hoogte of breedte wijzigen. De standaardwaarde is 1, wat ook betekent dat u 0,5 opgeeft, aangezien de waarde deze halveert en 2 de schaal verdubbelt.
2. scheef (): Met de eigenschap Skew kan een gebruiker een element naar rechts of links kantelen vanaf een coördinaatpunt. Het is bijna alsof je een rechthoek in een parallellogram verandert. U kunt een element scheeftrekken aan de hand van zijn coördinaten.
Voorbeeld:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Wanneer u dit doet, wordt het element horizontaal en verticaal 25 graden scheefgetrokken door skewX of skewY te gebruiken.
3. roteren ( ) : U kunt een element met de klok mee draaien met deze eigenschap. U kunt het 180 graden of 360 graden draaien om het terug te brengen naar zijn oorspronkelijke plaats.
.element {transform: rotate (25deg)}Om ook rotatie aan te bieden, kunt u een van de drie dimensies gebruiken: rotateX, rotateY of rotateZ.
4. vertalen ( ) : U kunt een element correct ondersteboven of zijwaarts verplaatsen.
.element {transform: translate (20px, 10px)}Translate verplaatst een bepaald object / element ondersteboven of zijwaarts. De eerste opgegeven waarde verplaatst het object naar rechts (negatief verplaatst het naar links) en de tweede waarde verplaatst het naar beneden (als u een negatieve waarde opgeeft, wordt het naar boven verplaatst).
Als dit je zou kunnen verwarren, pas dan de X-as toe om de positie van het element horizontaal te veranderen en de Y-as om de positie verticaal te veranderen. Het meest verbazingwekkende aspect van de eigenschap transform is dat door het toepassen van transformatie alleen het element kan bewegen, waarbij elk ander element of tekst intact blijft. De afstand wordt over het algemeen genomen in pixels of percentages.
Bijvoorbeeld:
.element {transform: translateX (waarde) transform: translateY (waarde)}5. perspectief (): U kunt diepte geven in het perspectief van een element. Het maakt het mogelijk om een 3D-transformatie aan een element te geven door het kubusvormig te maken in de transformatie.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
De introductie van de z-as geeft het element een 3D-visualisatie. translateZ () verplaatst het element naar de kijker, terwijl een negatieve waarde het weg beweegt.
6. matrix () : Combineer alle transformaties tot één.
draaien (45deg) vertalen (24px, 25px)
Door matrix () toe te passen, worden alle transformatie-eigenschappen in één array gecombineerd.
Het toepassen van transformatie-eigenschappen kan uw element en daarmee de aantrekkingskracht van uw website aanzienlijk verbeteren. Probeer ze!
Dit brengt ons bij het einde van dit artikel over Transform In CSS.
Als je meer wilt weten over webontwikkeling, bekijk dan het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).
Als je nog steeds geïnteresseerd bent Als je een vraag hebt, kun je deze posten in het commentaargedeelte van deze 'Wat is CSS' -blog, en we nemen zo snel mogelijk contact met je op.