Stile Trasforma Scala Javascript

| | | |

La creazione di elementi web animati è una caratteristica importante del web design. Ad esempio, potresti progettare un pulsante che desideri inclinare quando l’utente passa sopra il pulsante.

è qui che entra in gioco la proprietà di trasformazione CSS. La proprietà di trasformazione viene utilizzata per spostare , ruotare, inclinare e ridimensionare gli elementi di una pagina web. Ciò consente di rendere una pagina Web più interattiva per l’utente.

Questo tutorial discuterà, con esempi, come lavorare con le trasformazioni 2D in CSS utilizzando la proprietà di trasformazione. Alla fine della lettura di questo tutorial, sarai un esperto nell’uso delle trasformazioni CSS 2D.

Trasformazioni CSS 2D

La funzione di trasformazione CSS ti consente di creare trasformazioni di base animazioni come rotazioni, movimenti, ridimensionamenti e inclinazioni su una pagina web.

Quando un elemento viene trasformato, non ha effetto sugli elementi vicini. Tuttavia, un elemento trasformato può sovrapporsi, sebbene occuperà comunque lo spazio nella sua posizione predefinita su una pagina web.

Ci sono due tipi di trasformazioni nei CSS: 2D e 3D. La proprietà transform viene utilizzata per creare trasformazioni di entrambi i tipi, ma per questo articolo ci concentreremo sulle trasformazioni 2D.

Esistono numerose trasformazioni 2D che possono essere applicate agli elementi web in CSS. Questi sono:

  • translate()
  • scale()
  • scaleX()
  • scaleY()
  • skew()
  • skewX()
  • skewY()
  • matrix()
  • rotate()

Analizzeremo singolarmente ciascuna di queste trasformazioni, facendo riferimento a un esempio.

translate() Transformation

Il metodo translate() viene utilizzato per spostare un elemento dalla sua posizione attuale a una nuova posizione sullo schermo.

La funzione translate() accetta due parametri: il numero di pixel verso destra l’elemento dovrebbe spostarsi e il numero di pixel verso il basso l’elemento dovrebbe spostarsi.

La sintassi di questo metodo è:

translate(xAxis, yAxis);

Supponiamo di avere un riquadro che vogliamo spostare di 25px a destra e di 50px in basso dalla sua posizione attuale. Potremmo svolgere questo compito utilizzando il seguente codice:

Questa è una casella che è stata spostata utilizzando il metodo translate().

stili.css div { transform: translate(25px, 50px); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Risultato del codice qui]

Let&rsquo ;s scompongono il nostro codice. Nel nostro codice HTML, abbiamo creato due paragrafi di testo. Il primo paragrafo viene visualizzato nella parte superiore della pagina. Il secondo paragrafo appare sotto il primo paragrafo ed è racchiuso all’interno di un etichetta. Questo stile imposta il colore del nostro box un bordo nero solido largo 3 pixel. Inoltre, abbiamo anche utilizzato la trasformazione translate() per spostare il nostro riquadro di 25 pixel a sinistra e di 50 pixel in basso.

Ecco il nostro codice senza una trasformazione translate() specificata:

Questo è un riquadro che è stato spostato utilizzando il metodo translate().

styles.css div { background-color: lightblue; border: 3px solid black; }

Il nostro codice restituisce:

[Codice risultato qui]

Come puoi vedere, senza specificare un metodo translate(), la nostra casella mantiene la sua normale posizione nella pagina web.

trasformazione rotate()

La trasformazione rotate()consente di ruotare un elemento in senso orario o antiorario . La misura in cui un elemento viene ruotato si basa su un dato valore in gradi.

La sintassi fo r la trasformazione rotate() è la seguente:

transform: rotate(Xdeg);

Nella sintassi sopra, X si riferisce al numero di gradi di cui si desidera ruotare un elemento. Se vuoi ruotare un elemento in senso orario, dovresti specificare un valore positivo per X; altrimenti, se vuoi ruotare un elemento in senso antiorario, dovresti specificare un valore negativo per X.

Supponiamo di avere un riquadro che vogliamo ruotare di 45 gradi. Potremmo ruotare il nostro box usando il seguente codice:

Questa è una casella che è stata ruotato.

stili.css div {trasformare: ruotare(45deg); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Risultato del codice qui]

Lasciate’ s abbattere il nostro codice. Nel nostro codice HTML, abbiamo creato un box di 45 gradi in senso orario.

Come puoi vedere nel risultato del nostro codice, il box che abbiamo creato è stato ruotato. Ecco un confronto tra le nostre scatole pre-ruotate e post-rotate:

Screen Shot 2020 04 02 Alle 08.40.36

trasformazione scale()

Il metodo scale() consente di aumentare o diminuire la dimensione di un elemento.

La sintassi per il metodo scale() è la seguente:

transform: scale(x, y);

La funzione scale scalerà proporzionalmente la larghezza (x) e l’altezza (y) di un’immagine in base ai valori specificati. Se non specifichi un valore per la scala dell’altezza, la funzione scale() assumerà che la scala dell’altezza dovrebbe essere uguale alla scala della larghezza.

Supponiamo di avere una scatola che vogliamo ridimensionare a 1,5 volte la sua dimensione originale. Potremmo farlo usando questo codice:

Questa è una casella che è stata ridimensionata.

stili.css div { transform: scale(1.5, 1.5); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Codice risultato qui]

Nel nostro Codice HTML, abbiamo creato un riquadro che contiene una frase di testo. Nel nostro codice CSS, abbiamo specificato che tutti i

Schermata 2020 04 02 alle 08.37.38Screen Shot 2020 04 02 alle 08.37.38

Ecco un’immagine che confronta le dimensioni di due scatole. La casella più piccola non ha alcun valore scale() e la casella più grande ha una scala() di 1,5:

La casella più grande, che include il testo Questa è una casella che è stata ridimensionato. è 1,5 volte più grande della nostra scatola originale.

Trasformazione scaleX()

La trasformazione scaleX() consente per aumentare o diminuire la larghezza di un elemento. La sintassi per la trasformazione scaleX() è:

transform: scaleX(xValue);

Il parametro xValue è la quantità in base al quale si desidera ridimensionare la larghezza di un elemento. Supponi di avere una scatola di cui vuoi aumentare la larghezza di un fattore 1,6. Puoi aumentare le dimensioni di questa casella utilizzando il seguente codice:

;

Questa è una casella che è stata ridimensionata.

stili.css div { transform: scaleX(1.5); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Codice risultato qui]

In questo ad esempio, la larghezza della nostra scatola è stata aumentata di 1,5 volte la sua larghezza originale.

Trasformazione scaleY()

La trasformazione scaleY() permette di aumentare o diminuire l’altezza di un elemento. scaleY() funziona allo stesso modo di scaleX(), ma invece di influenzare la larghezza di un elemento, scaleY() cambia l’altezza dell’elemento.

Supponiamo di voler ridurre l’altezza di una scatola alla metà della sua altezza attuale. Potremmo farlo usando questo codice:

Questa è una casella che è stata ridimensionata.

stili.css div { transform: scaleY(0.5); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Codice risultato qui]

Nel nostro codice, abbiamo ridotto l’altezza della nostra scatola (che è rappresentata dall’asse y) di un fattore 0,5. In altre parole, la nostra scatola è la metà della sua altezza originale.

Trasformazione skew()

La trasformazione skew() distorce un elemento lungo i suoi assi xey dagli angoli specificati.

La sintassi per il metodo skew() è la seguente:

transform: skew(xValue , yValue);

xValue si riferisce a quanto un elemento dovrebbe essere inclinato sul suo asse x e yValue si riferisce a quanto un elemento dovrebbe essere inclinato sul suo asse y. Entrambi i valori devono essere rappresentati in gradi.

Se non viene specificato un valore per yValue, non verrà applicato alcun disallineamento sull’asse y.

Supponiamo di volere per inclinare un riquadro di 10 gradi sull’asse x e di 15 gradi sull’asse y. Potremmo farlo usando questo codice:

Questa è una casella che è stata distorta.

stili.css div { transform: skew(10deg, 15deg); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

In questo esempio, abbiamo inclinato il nostro riquadro di 10 gradi sull’asse x e di 15 gradi sull’asse y.

Trasformazioni skewX() e skewY()

Come il metodo scale(), skew()è dotato di due metodi secondari che vengono utilizzati per inclinare un elemento lungo l’asse x o y di un elemento .

Per inclinare un elemento solo lungo il suo asse X, puoi utilizzare il metodo skewX(). La sintassi di questo metodo è la seguente:

transform: skewX(xValue);

xValue è il numero di gradi sull’asse x di cui un elemento deve essere inclinato.

Per inclinare un elemento lungo il suo asse Y, puoi utilizzare il metodo skewY(). La sintassi per il metodo skewY() è:

transform: skewY(yValue);< br>

Quindi, se vuoi inclinare un elemento di 10 gradi sul suo asse Y, puoi usare questo codice:

Trasformazione matrix()

La trasformazione matrix() esegue tutte le trasformazioni CSS 2D su un elemento. Quindi, matrix() può essere usato per applicare trasformazioni di traslazione, rotazione, scala e inclinazione.

La funzione matrix() accetta sei parametri che ti permettono di applicare trasformazioni a un elemento. La sintassi per questo metodo è la seguente:

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Supponiamo di voler creare un riquadro che utilizzi le seguenti trasformazioni:

Potremmo specificare ciascuna di queste trasformazioni individualmente . Tuttavia, cosi facendo dovremmo scrivere molte trasformazioni separate. Invece, possiamo usare il metodo matrix() per scrivere queste trasformazioni usando una riga di codice.

Ecco il codice che potremmo usare per creare la nostra scatola con le suddette trasformazioni:

Questa è una casella che è stata distorta.< /p> stili.css div { transform: matrix(1, 10, 10, 1.25, 25, 25); colore di sfondo: azzurro; bordo: 3px nero solido; }

Il nostro codice restituisce:

[Codice risultato qui]

Nel nostro codice, abbiamo applicato una trasformazione di inclinazione, scala e traduzione alla nostra scatola. Abbiamo ottenuto ciò utilizzando il metodo matrix() e passando i valori specificati in precedenza.

Conclusione

La proprietà transform viene utilizzata per applicare trasformazioni a un elemento in CSS. CSS offre una serie di trasformazioni 2D, tra cui inclinazione, scala, rotazione e traslazione, che vengono utilizzate per trasformare gli elementi web.

Questo tutorial ha esplorato, con riferimento agli esempi, le basi del CSS 2D trasformazioni. Ora sei pronto per iniziare a creare le tue trasformazioni 2D come uno sviluppatore web professionista.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method