I den här artikeln kommer vi att förstå Transform In i detalj och följa upp den med en detaljerad praktisk demonstration. Följande tips kommer att behandlas i den här artikeln,
Med framstegen i webbplatsens funktioner är det lika viktigt att tillhandahålla smarta integrationer på din webbplats för att göra den tilltalande och bättre. Att lägga till olika CSS-element som komplimangerar din webbplats är timens behov.
Människor håller sig utanför webbplatserna som inte riktigt tilltalar massorna. Så vad sägs om att försöka transformera några av elementen och försköna din CSS med ett mindre kompressionsvärde.
För att uppfylla liknande behov har vi transformerat CSS-egenskap som omvandlar element genom att antingen vrida, rotera, skala eller översätta dem.
Fortsätter med den här artikeln om Transform In CSS
Vad är transform CSS?
Omvandla ett CSS-element innebär att ge det en kant i antingen 2D- eller 3D-form. Det ändrar visuellt utformningen av ett element.
2D-transformation fungerar på X- och Y-axlar. Du kan ge valfri kant eller struktur på båda axlarna för att göra ändringar. För 3D-omvandling måste den arbeta på X-, Y- och Z-axlar för att ge det djup som behövs.
CSS 2D-transformegenskaper:
| Fungera | Beskrivning |
matris( n, n, n, n, n, n ) | Matris med sex värden suddig logik i artificiell intelligens |
Översätt( x, y ) | Tillåter att elementet rör sig längs X- och Y-axeln |
translateX ( n ) | Tillåter att elementet rör sig längs X-axeln |
översätt Y ( n ) | Låter elementet röra sig längs Y-axeln |
skala( x, y ) | Ändrar elementens bredd och höjd |
skalaX ( n ) | Ändrar elementets bredd |
skala Y ( n ) | Ändrar elementens höjd |
rotera( vinkel ) | Tillåter att rotera elementet i en vinkel som anges i parametern |
skev( x-vinkel, y-vinkel ) | Skjuter elementet längs X- och Y-axeln |
skewX ( vinkel ) | Skaver elementet längs X-axeln |
skev ( vinkel ) | Skjuter elementet längs Y-axeln |
CSS 3D-transformationsegenskaper:
Fast egendom | Beskrivning |
omvandla | Tillämpar en 2D- eller 3D-transformation på ett element |
förvandla-ursprung | Låter dig ändra positionen på transformerade element |
transform-stil | Anger hur kapslade element återges i 3D-utrymme |
perspektiv | Anger perspektivet på hur 3D-element ses |
perspektiv-ursprung | Anger bottenpositionen för 3D-element |
synlighet på baksidan | Definierar huruvida ett element ska vara synligt när det inte vetter mot skärmen |
Till exempel:
css .element {bredd: 20px höjd: 20px transform: skala (20)}Nu, när du gör det, skalas det definierade elementet 20 gånger.
Inte bara detta, du kan också skala axelvis för horisontell och vertikal skalning.
transform: scaleX (2) transform: scaleY (.5)
För att ge en ordentlig omvandling över alla webbläsare kan du:
div {-webkit-transform: skala (1.5) -moz-transform: skala (1.5) -o-transform: skala (1.5) transform: skala (1.5)}Transform CSS-egenskapen förbättrar koordinatutrymmet för CSS visuella formateringsnivå.
Vad är visuell formateringsnivå?
Visuell formateringsnivå betyder att bearbeta ett dokument och visuellt presentera det på medieplattformarna. Med visuell formatering kan du omvandla varje element till en modell som överensstämmer med CSS-rutans modell. CSS-boxmodell definierar ett element i ett standard rektangulärt rutformat som definierar storlek, position och egenskaper.
Notera: Endast transformerbara element kan transformeras.
Fortsätter med den här artikeln om Transform In CSS
Vilka är de olika transformationsegenskaperna?
Låt oss titta på alla transformerande egenskaper:
1. skala (): Skalning innebär att ändra elementets storlek antingen horisontellt eller vertikalt.
För vertikal skalning:skalaX
För horisontell skalning:skalaY
För ett element kan du också ändra teckenstorlek, vaddering, höjd eller bredd. Standardvärdet är 1 vilket också innebär att du tillhandahåller 0,5 eftersom värdet halverar det medan det ger 2 fördubblar skalningen.
2. skeva (): Skew-egenskap tillåter en användare att luta ett element åt höger eller vänster från en koordinatpunkt. Det är nästan som att göra en rektangel till ett parallellogram. Du kan vrida ett element efter dess koordinater.
Exempel:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)När du gör det snedställer elementet 25 grader horisontellt och vertikalt genom att använda skewX eller skewY.
3. rotera ( ) : Du kan rotera ett element medurs genom att använda den här egenskapen. Du kan rotera den 180 grader eller 360 grader för att återföra den till sin ursprungliga plats.
.element {transform: rotera (25deg)}För att tillhandahålla rotation kan du också använda någon av de tre dimensionerna: rotateX, rotateY eller rotateZ.
4. översätt ( ) : Du kan flytta ett element ordentligt upp och ner eller i sidled.
.element {transform: translate (20px, 10px)}Translate flyttar ett specificerat objekt / element upp och ner eller i sidled. Det första angivna värdet flyttar objektet åt höger (negativt flyttar det till vänster) och det andra värdet flyttar det nedåt (om du anger ett negativt värde flyttas det uppåt).
Om detta kan förvirra dig, använd X-axeln för att ändra elementets position horisontellt och Y-axlarna för att ändra positionen vertikalt. Den mest fantastiska aspekten av transform-egenskapen är att tillämpningen av transform bara tillåter elementet att röra sig, vilket håller alla andra element eller text intakta. Avståndet tas i allmänhet i pixlar eller procent.
Till exempel:
.element {transform: translateX (value) transform: translateY (value)}5. perspektiv (): Du kan ge ett djup i elementets perspektiv. Det gör det möjligt att ge en 3D-transformation till ett element genom att göra det kubiskt i transformationen.
translate3d (x, y, z)
översätt Z (z)
translate3d (x, y, z) translateZ (z)
Introduktionen av z-axeln ger elementet en 3D-visualisering. translateZ () flyttar elementet mot betraktaren medan ett negativt värde flyttar bort det.
6. matris () : Kombinera alla förvandlingar till en.
rotera (45deg) översätt (24px, 25px)
Tillämpning av matris () kombinerar alla transformegenskaper i en matris.
artificiell intelligens kontroverser fördelar och nackdelar
Att använda transformeringsegenskaper kan förbättra ditt element och därmed din webbplats överklagande. Prova dem!
Detta leder oss till slutet av den här artikeln om Transform In CSS.
Om du är intresserad av att lära dig mer om webbutveckling, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).
Om du fortfarande är intresserad Om du har några frågor kan du lägga upp den i kommentarsektionen på denna 'Vad är CSS' -bloggen, så återkommer vi till dig så snart som möjligt.