skew（）與skewX（）之間的差異skewY（）

在爲我網站中的某些對象創建一些轉換時，我發現了以下內容。如果給定對象，轉換屬性skew(20deg,45deg)將與其他對象skewX(20deg)和skewY(45deg) 。skew（）與skewX（）之間的差異skewY（）

有人可以解釋我爲什麼會發生這種情況？

.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>

更新：歪斜短語法。如何通過使用skew()簡短語法來獲得與skewX()和skewY()相同的效果。

來源

2015-02-23 cssGEEK

想着矩陣，當你做

transform : skew(x, y);

那麼它像跨乘的矩陣

[X，Y，Z]

和

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

其中sx = tan(x)和sy = tan(y)

導致新COORDS

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

但是當這樣做

transform : skewX(x) skewY(y);

它像第一橫乘法矩陣

[X，Y，Z]

與基質

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

導致新COORDS

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

，然後新的矩陣

[X 'Y'，Z」]

十字架與

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

相乘從而產生新的COORDS作爲

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

因此Y coords從Y + X * sy改爲Y + (X + Y * sx) * sy

來源

2015-02-23 12:22:15 singhiskng

這是正確答案！在第二個偏斜功能之前，座標被改變。 – 2015-02-23 14:55:56

感謝@HashemQolami。 – singhiskng 2015-02-23 18:41:36

我希望@cssgeek會標記接受這個答案。 – singhiskng 2015-02-23 18:44:12

所報W3：

注意的skew()行爲是從skewY()乘以skewX() 不同。實現必須支持該功能，以便與舊版內容兼容。

所以只使用skew(x,y)，如果你想設置兩個或只是使用skewX()或skewY()如果你想設置一個特定的斜軸線。

此外，在邏輯上它沒有任何意義，使用skewX()和skewY()在同一transform在這裏你可以使用單獨skew()同時設定。

來源

2015-02-23 11:37:25

'transform'可以接受任意數量的變換函數的任意組合。即使你引用的註釋中說「將'skewX（）'與'skewY（）'」相乘，這意味着你確實可以將它們合併成一個聲明。如果您試圖指定兩個單獨的'transform'聲明，則可以重寫另一個聲明。 – BoltClock 2015-02-23 12:01:30

所以我認爲這是一個實現問題。 – 2015-02-23 12:06:13

CSS歪斜酒店有沒有短語法： http://css-tricks.com/almanac/properties/t/transform/

，你必須使用：

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

來源

2015-02-23 11:42:03

您鏈接到1.的博客文章不是官方資源，2.在添加'skew'短語法之前創建*。傾斜確實有一個簡短的語法：http://www.w3.org/TR/css-transforms-1/。 – 2015-02-23 11:45:13

對不起，我不知道 – 2015-02-23 11:48:37

skew（）與skewX（）之間的差異skewY（）

回答

相關問題