CSS3 Transform不得不說的乙個小知識點

2021-10-04 06:56:21 字數 946 閱讀 6833

在逆戰班學習了將近乙個月了吧,想來說一下我在使用transform這個屬性過程中總會忘記、總會在這裡跌倒的問題(真的是一部辛酸史啊,老記不住,趁著現在記著趕緊記錄下來)

關於css3的transform屬性,是乙個非常好用的屬性,這個屬性允許我們對元素進行位移(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew),用這個屬性在結合一下:hover、:target偽類選擇器可以完成一些比較簡單的小動畫(初入門來說感覺還是挺高大上的),接下來說一下很容易出錯的乙個地方就是上述這些屬性值是沒有累加性的,接下來以乙個簡單的小案例為例子說明一下。

我想要讓滑鼠移入時,這個立方體上面開啟,就是讓2那個面豎起來,此時肯定會有人想了那就繞著2這個面最上邊那個邊逆時針旋轉90度唄,但是如果這樣想就錯了,假設真的就按照上述的說法,繞著最上邊逆時針旋轉90度會有什麼樣的結果?結果如下

.box:hover .box2
為什麼會出現這種原因呢?原因在於本來2這個面是正對著我們的,通過一次旋轉將這個面旋轉上去的,而且transform這個屬性的屬性值是沒有累加性的,不是說第一次旋轉90度,第二次在旋轉90度就是180度了,這樣一次旋轉90度,無論旋轉多少次都是90度,但是如果旋轉180度會出現我們想要的效果

無論是位移、旋轉、縮放還是傾斜都是這樣,這個點很小,但是很容易出錯。

下面附上這個小案例的原始碼

12

3456

筆記 CSS3transform屬性

transform屬性有斜拉 skew 縮放 scale 旋轉 rotate 位移 translate 斜拉skew 用法skew 10deg 或者skew 10deg,20deg 兩個引數表示傾斜角度 乙個引數時表示水平方向傾斜 兩個引數時,第乙個表示水平方向傾斜,第二個引數表示垂直方向傾斜 sk...

CSS3 transform變換,案例

1 translate x,y 設定盒子位移 2 scale x,y 設定盒子縮放 3 rotate deg 設定盒子旋轉 4 skew x angle,y angle 設定盒子斜切 5 perspective 設定透視距離 6 transform style flat preserve 3d 設定...

CSS3 transform變形功能

單個測試 原圖 單個測試 rotate 單個測試 原圖 單個測試 scale 總結 scalex scaley 可以這兩個這樣單獨的設定,就可以單獨設定是x軸縮放還是y軸縮放了,或者設定兩個值得時候,其中乙個設為0也可以這種效果 單個測試 原圖 單個測試 translate 總結 如果你全部寫完了,...