Differenza tra skew() e skewX() skewY()

Question

Durante la creazione di alcune trasformazioni per alcuni oggetti nel mio sito Web ho trovato quanto segue.Se viene assegnato un oggetto la proprietà di trasformazione skew(20deg,45deg) sarà diversa da un altro oggetto con skewX(20deg) e skewY(45deg) .

Qualcuno può spiegarmi perché sta succedendo questo?

.skew { 
 
    height:10em; 
 
    width:10em; 
 
    background:red; 
 
    margin:auto; 
 
} 
 

 
#first { 
 
    transform:skew(20deg,45deg); 
 
} 
 

 
#second { 
 
    transform:skewX(20deg) skewY(45deg); 
 
}

<div class="skew" id="first"> skew(20deg,45deg) </div> <hr> 
 
<div class="skew" id="second"> skewX(20deg) skewY(45deg) </div>

Aggiornamento: skew ha sintassi breve. Come posso ottenere lo stesso effetto che ho con skewX() e skewY() utilizzando la sintassi breve skew().

Answer 1

pensare a matrice, quando lo fai

transform : skew(x, y); 

, allora è come moltiplicazione incrociata di matrici

[X, Y, Z]

e

| 1, sx, 0 | 
| sy, 1, 0 | 
| 0, 0, 1 | 

dove sx = tan(x) e sy = tan(y)

conseguente nuove coordinate

X' = X + Y * sx 
Y' = Y + X * sy 
Z' = Z 

ma quando fate

transform : skewX(x) skewY(y); 

è come matrice moltiplicare prima traversa

[X, Y, Z]

con matrice

| 1, sx, 0 | 
| 0, 1, 0 | 
| 0, 0, 1 | 

conseguente nuove coordinate

X' = X + Y * sx 
Y' = Y 
Z' = Z 

e quindi nuova matrice

[X 'Y', Z']

trasversale moltiplicato

| 1, 0, 0 | 
| sy, 1, 0 | 
| 0, 0, 1 | 

conseguente nuove coordinate come

X" = X + Y * sx 
Y" = Y + (X + Y * sx) * sy 
Z" = Z 

quindi Y cambi di coordinate da Y + X * sy a Y + (X + Y * sx) * sy

Answer 2

come citato sul W3:

Nota che il comportamento di skew() è diversa da moltiplicare skewX() con skewY(). Le implementazioni devono supportare questa funzione per la compatibilità con il contenuto legacy.

Quindi basta usare skew(x,y) se si desidera impostare sia o semplicemente usare skewX() o skewY() se si desidera impostare un asse skew specifica.

Inoltre, logicamente non ha alcun senso utilizzare skewX() e skewY() sullo stesso transform dove è possibile utilizzare skew() solo per impostare entrambi.

Answer 3

CSS proprietà skew non ha breve sintassi: http://css-tricks.com/almanac/properties/t/transform/

devi usare:

transform: skewX(value); /* e.g. skewX(25deg) */ 
transform: skewY(value);