Come creare Trasformazioni con i CSS 3

CSS 3 consente di creare molti effetti cool sul tuo sito web per la visualizzazione su iPhone e iPad. I CSS 3 proprietà di trasformazione consentono di trasformare un elemento per creare effetti in 2D e 3D. È possibile specificare un elenco di trasformazioni per modificare molteplici aspetti di un elemento. Se vengono specificate più opzioni, ciascuna viene applicata nell'ordine indicato.

Opzioni di trasformazione comprendono quelli descritti in questa lista:

  • scala - Cambia l'altezza e la larghezza di un elemento. È possibile specificare due numeri per definire una scala diversa per la larghezza e l'altezza. Tuttavia, questo elemento è generalmente usato con un solo numero per ridimensionare un elemento proporzionalmente. Il primo dei seguenti esempi trasforma l'elemento di scalare a metà della sua dimensione, e il secondo trasforma l'elemento a metà larghezza e due volte più alto:

    -webkit-transform: scala (0.5);
    -webkit-transform: scala (2, 0.5);
  • tradurre - Utilizzare questa proprietà per tradurre, o spostare, un elemento dalla posizione A alla posizione B altrettanto lungo gli assi x e y. È inoltre possibile utilizzare translateX e translateY per spostare gli elementi lungo un solo asse alla volta. Ad esempio, questo codice causa un elemento per spostare 150 pixel da sinistra e 150 dall'alto:

    -webkit-transform: translate (150px, -150px);

  • skew - Utilizzare questa proprietà per inclinare o modificare la posizione di un elemento sulla base di un valore specificato che distorce un elemento sullo assi xey. Per esempio, questo potrebbe inclinare un elemento di 20 gradi sull'asse x:

    -webkit-transform: skew (15deg, 4deg);

  • rotazione - Utilizzare questa proprietà per ruotare o modificare la posizione di un elemento sulla base di un valore specificato che controlla l'angolo di rotazione. Ad esempio, il primo esempio di questo codice ruota un elemento 5 gradi verso destra, la seconda ruota l'elemento di -5 (negativi) 5 gradi.

    Come si può vedere nella figura, che provoca le foto a destra ea sinistra in questo disegno all'angolo lontano dal centro immagine:

    -webkit-transform: rotate (5deg);
    -webkit-transform: rotate (-5deg);

Nell'esempio sito SCUBA mostrato in questa figura, si noti che le due immagini fuori ruotare a destra ea sinistra, rispettivamente, utilizzando la funzione CSS Ruota - ma solo su Safari, Firefox e Chrome. Visita questa pagina con IE e le scatole sono tutti in una linea retta, ma non sembrano male in questo modo, quindi non c'è niente di male.

Come creare Trasformazioni con i CSS 3

Si noti inoltre che ci sia un'immagine nascosto nel fondo del disegno in modo che quando si accende l'iPad / iPhone dal paesaggio al ritratto vista, contenuti riempie l'intero schermo.