In questo articolo capiremo Transform In in dettaglio e seguirlo con una dimostrazione pratica dettagliata. I seguenti suggerimenti saranno trattati in questo articolo,
Con l'avanzamento delle funzionalità del sito Web, è altrettanto importante fornire integrazioni intelligenti sul tuo sito Web per renderlo attraente e migliore. L'aggiunta di vari elementi CSS che completano il tuo sito sono la necessità del momento.
Le persone restano fuori dai siti web che non piacciono alle masse. Quindi, che ne dici di provare a trasformare alcuni elementi e ad abbellire il tuo CSS con un valore di compressione inferiore.
Per soddisfare esigenze simili, abbiamo trasformato la proprietà CSS che trasforma gli elementi inclinandoli, ruotandoli, ridimensionandoli o traducendoli.
Andando avanti con questo articolo su Transform In CSS
Cos'è Transform CSS?
Trasformare un elemento CSS significa fornirgli un vantaggio in forma 2D o 3D. Cambia visivamente lo stile di un elemento.
La trasformazione 2D funziona sugli assi X e Y. È possibile fornire qualsiasi bordo o struttura su entrambi gli assi per apportare modifiche. Mentre per la trasformazione 3D, deve funzionare sugli assi X, Y e Z per fornire la profondità necessaria.
Proprietà di trasformazione CSS 2D:
| Funzione | Descrizione |
matrice( n, n, n, n, n, n ) | Matrice di sei valori |
tradurre( x, y ) | Consente all'elemento di spostarsi lungo gli assi X e Y. |
translateX ( n ) | Consente all'elemento di spostarsi lungo l'asse X. |
translateY ( n ) | Consente all'elemento di spostarsi lungo l'asse Y. |
scala( x, y ) | Modifica la larghezza e l'altezza degli elementi |
scaleX ( n ) | Modifica la larghezza dell'elemento |
scaleY ( n ) | Modifica l'altezza di un elemento |
ruotare( angolo ) | Permette di ruotare l'elemento di un angolo specificato nel parametro |
storto( angolo x, angolo y ) tag html per l'interruzione di riga | Inclina l'elemento lungo gli assi X e Y. |
skewX ( angolo ) | Inclina l'elemento lungo l'asse X. |
skewY ( angolo ) | Inclina l'elemento lungo l'asse Y. |
Proprietà di trasformazione CSS 3D:
Proprietà | Descrizione |
trasformare | Applica una trasformazione 2D o 3D a un elemento |
trasformare-origine | Consente di modificare la posizione sugli elementi trasformati |
stile di trasformazione | Specifica la modalità di rendering degli elementi nidificati nello spazio 3D |
prospettiva | Specifica la prospettiva su come vengono visualizzati gli elementi 3D |
prospettiva-origine | Specifica la posizione inferiore degli elementi 3D cos'è un token java |
visibilità sul retro | Definisce se un elemento deve essere visibile o meno quando non è rivolto verso lo schermo |
Per esempio:
css .element {width: 20px height: 20px transform: scale (20)}Ora, quando lo fai, l'elemento definito verrà ridimensionato di 20 volte.
Non solo, puoi anche scalare l'asse in base al ridimensionamento orizzontale e verticale.
trasformare: scaleX (2) trasformare: scaleY (.5)
Per fornire una trasformazione adeguata a tutti i browser puoi:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}La proprietà CSS di trasformazione migliora lo spazio delle coordinate del livello di formattazione visuale CSS.
Cos'è il livello di formattazione visuale?
Il livello di formattazione visiva significa elaborare un documento e presentarlo visivamente sulle piattaforme multimediali. Con la formattazione visiva, puoi trasformare ogni elemento in un modello che concorda con il modello di casella CSS. Il box model CSS definisce un elemento in un formato box rettangolare standard definendone le dimensioni, la posizione e le proprietà.
Nota: Possono essere trasformati solo elementi trasformabili.
Andando avanti con questo articolo su Transform In CSS
Quali sono le varie proprietà di trasformazione?
Diamo un'occhiata a tutte le proprietà di trasformazione:
1.scale (): Scalare significa modificare la dimensione dell'elemento orizzontalmente o verticalmente.
Per il ridimensionamento verticale:scaleX
Per il ridimensionamento orizzontale:scaleY
Per un elemento, puoi anche modificare la dimensione del carattere, il riempimento, l'altezza o la larghezza. Il valore predefinito è 1, il che significa anche fornire 0,5 poiché il valore lo dimezza mentre fornisce 2 il doppio del ridimensionamento.
2. skew (): La proprietà Inclina consente all'utente di inclinare un elemento a destra oa sinistra da un punto di coordinate. È quasi come trasformare un rettangolo in un parallelogramma. Puoi inclinare un elemento in base alle sue coordinate.
allocazione dinamica della memoria in c ++ con programma di esempio
Esempio:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Quando lo fai, l'elemento si inclina di 25 gradi orizzontalmente e verticalmente utilizzando skewX o skewY.
3. ruota ( ) : È possibile ruotare un elemento in senso orario utilizzando questa proprietà. Puoi ruotarlo di 180 gradi o 360 gradi per riportarlo nella sua posizione originale.
.element {transform: rotate (25deg)}Anche per fornire la rotazione, puoi usare una qualsiasi delle tre dimensioni: rotateX, rotateY o rotateZ.
4. traduci ( ) : Puoi spostare un elemento correttamente capovolto o lateralmente.
.element {transform: translate (20px, 10px)}Translate sposterà un oggetto / elemento specificato capovolto o lateralmente. Il primo valore specificato sposta l'oggetto verso destra (negativo lo sposterà a sinistra) e il secondo valore lo sposta verso il basso (specificando un valore negativo lo sposterà verso l'alto).
Se questo potrebbe confonderti, applica l'asse X per cambiare la posizione dell'elemento orizzontalmente e gli assi Y per cambiare la posizione verticalmente. L'aspetto più sorprendente della proprietà di trasformazione è che l'applicazione della trasformazione consentirà solo all'elemento di spostarsi, mantenendo intatto ogni altro elemento o testo. La distanza è generalmente presa in pixel o in percentuale.
Per esempio:
.element {transform: translateX (value) transform: translateY (value)}5. prospettiva (): è possibile fornire una profondità nella prospettiva di un elemento. Permette di dare una trasformazione 3D ad un elemento rendendolo cubico nella trasformazione.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
L'introduzione dell'asse z conferisce all'elemento una visualizzazione 3D. translateZ () sposta l'elemento verso il visualizzatore mentre un valore negativo lo allontana.
6. matrice () : Combina tutte le trasformazioni in una.
rotate (45deg) translate (24px, 25px)
L'applicazione di matrix () combina tutte le proprietà di trasformazione in un array.
L'applicazione delle proprietà di trasformazione può migliorare notevolmente il tuo elemento e quindi l'attrattiva del tuo sito web. Provali!
Questo ci porta alla fine di questo articolo su Transform In CSS.
Se sei interessato a saperne di più sullo sviluppo web, dai un'occhiata al di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Se sei ancora interessato Se hai qualche domanda, puoi postarla nella sezione commenti di questo blog 'Che cos'è CSS' e ti risponderemo il prima possibile.