En aquest article entendrem Transform In en detall i feu-ne un seguiment amb una demostració pràctica detallada. En aquest article es tractaran les següents indicacions,
Amb l’avenç en les funcionalitats del lloc web, és igualment important proporcionar integracions intel·ligents al vostre lloc web perquè sigui atractiu i millor. L’afegit de diversos elements CSS que complementen el vostre lloc és la necessitat de l’hora.
La gent es queda fora dels llocs web que realment no agraden a les masses. Per tant, què tal si voleu intentar transformar alguns dels elements i embellir el vostre CSS amb un valor de compressió inferior.
Per satisfer necessitats similars, hem de transformar la propietat CSS que transforma els elements inclinant-los, girant-los, escalant-los o traduint-los.
Continuem amb aquest article sobre Transform In CSS
Què és transformar CSS?
Transformar un element CSS significa proporcionar-li un avantatge en forma 2D o 3D. Canvia visualment l'estil d'un element.
La transformació 2D funciona en eixos X i Y. Podeu proporcionar qualsevol aresta o estructura en els dos eixos per fer canvis. Tot i que per a la transformació 3D, ha de treballar en eixos X, Y i Z per proporcionar la profunditat necessària.
Propietats de transformació CSS 2D:
| Funció | Descripció |
matriu ( n, n, n, n, n, n ) | Matriu de sis valors |
traduir ( x, i ) | Permet que l'element es mogui al llarg de l'eix X i de l'eix Y |
traduirX ( n ) | Permet que l'element es mogui al llarg de l'eix X. |
traduirY ( n ) | Permet que l'element es mogui al llarg de l'eix Y |
escala ( x, i ) | Canvia l'amplada i l'alçada dels elements |
scaleX ( n ) | Canvia l’amplada de l’element |
escala Y ( n ) | Canvia l'alçada dels elements |
girar ( angle ) | Permet girar l'element en un angle especificat al paràmetre |
esbiaixar ( x-angle, i-angle ) | Esbiaixa l'element al llarg de l'eix X i de l'eix Y |
skewX ( angle ) | Inclina l'element al llarg de l'eix X |
esbiaixat ( angle ) | Inclina l'element al llarg de l'eix Y |
Propietats de transformació CSS 3D:
Propietat | Descripció mapa de hash vs taula de hash |
transformar | Aplica una transformació 2D o 3D a un element |
transformar-origen | Permet canviar la posició dels elements transformats |
estil transformat | Especifica com es representen els elements imbricats a l'espai 3D |
perspectiva | Especifica la perspectiva de com es visualitzen els elements 3D |
perspectiva-origen | Especifica la posició inferior dels elements 3D |
visió posterior | Defineix si un element ha de ser visible o no quan no està cap a la pantalla |
Per exemple:
css .element {width: 20px height: 20px transform: scale (20)}Ara, quan ho feu, l'element definit s'escalarà 20 vegades.
No només això, també podeu escalar els eixos segons l’escala horitzontal i vertical.
transformar: escalaX (2) transformar: escalaY (, 5)
Per proporcionar una transformació adequada a tots els navegadors, podeu fer el següent:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}La propietat CSS de transformació millora l’espai de coordenades del nivell de format visual CSS.
Què és el nivell de format visual?
El nivell de format visual significa processar un document i presentar-lo visualment a les plataformes multimèdia. Amb el format visual, podeu transformar cada element com un model que coincideixi amb el model de caixa CSS. El model de caixa CSS defineix un element en un format de caixa rectangular estàndard que defineix la mida, la posició i les propietats.
Nota: Només es poden transformar els elements transformables.
Continuem amb aquest article sobre Transform In CSS
Quines són les diverses propietats de transformació?
Vegem totes les propietats transformadores:
1. escala (): Escalar significa canviar la mida de l'element horitzontalment o verticalment.
Per a escala vertical:escalaX
Per a escala horitzontal:escala Y
Per a un element, també podeu canviar la mida de la font, el farcit, l'alçada o l'amplada. El valor per defecte és 1, que també significa proporcionar 0,5, ja que el valor el redueix a la meitat, mentre que proporciona 2 dobles l’escala.
2. inclinar (): La propietat inclinada permet a l'usuari inclinar un element cap a la dreta o l'esquerra des d'un punt de coordenades. És gairebé com convertir un rectangle en un paral·lelogram. Podeu inclinar un element per les seves coordenades.
Exemple:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Quan ho feu, l'element esbiaixa 25 graus horitzontalment i verticalment mitjançant skewX o skewY.
3. girar ( ) : Podeu girar un element en sentit horari utilitzant aquesta propietat. Podeu girar-lo 180 o 360 graus per tornar-lo al lloc original.
.element {transform: rotate (25deg)}Per proporcionar rotació també, podeu utilitzar qualsevol de les tres dimensions: rotateX, rotateY o rotateZ.
4. traduir ( ) : Podeu moure un element correctament de cap per avall o cap als costats.
.element {transform: translate (20 px, 10 px)}Traduir mourà un objecte / element especificat cap per avall o cap als costats. El primer valor especificat mou l'objecte cap a la dreta (el negatiu el mourà cap a l'esquerra) i el segon valor el desplaçarà cap avall (si especifiqueu un valor negatiu, el mourà cap amunt).
Si això us pot confondre, apliqueu l'eix X per canviar la posició de l'element horitzontalment i els eixos Y per canviar la posició verticalment. L’aspecte més sorprenent de la propietat de transformació és que, aplicant la transformació, només es podrà moure l’element, mantenint intacte qualsevol altre element o text. La distància es pren generalment en píxels o percentatges.
Per exemple:
.element {transform: translateX (valor) transform: translateY (valor)}5. perspectiva (): podeu proporcionar una profunditat en la perspectiva d'un element. Permet donar una transformació 3D a un element fent-lo cúbic en la transformació.
translate3d (x, y, z)
traduirZ (z)
translate3d (x, y, z) translateZ (z)
La introducció de l'eix z proporciona a l'element una visualització 3D. translateZ () mou l'element cap al visor mentre un valor negatiu l'allunya.
6. matriu () : Combineu totes les transformacions en una sola.
gira (45 graus) tradueix (24 px, 25 px)
Aplicant matrix () combina totes les propietats de transformació en una matriu.
java què és un testimoni
L’aplicació de propietats de transformació pot millorar el vostre element i, per tant, el vostre lloc web. Proveu-los!
Això ens porta al final d’aquest article sobre Transform In CSS.
Si esteu interessats en obtenir més informació sobre el desenvolupament web, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Si encara us interessa Si teniu alguna pregunta, podeu publicar-la a la secció de comentaris d’aquest bloc “Què és CSS” i us respondrem el més aviat possible.