概述
主要運用到CSS3的3D transform等變換
詳細
一、概述
1、主要運用到CSS3的3D transform等變換
-
transform:向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
值 | 描述 | 測試 |
---|---|---|
none | 定義不進行轉換。 | 測試 |
matrix(n,n,n,n,n,n) | 定義 2D 轉換,使用六個值的矩陣。 | 測試 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換,使用 16 個值的 4x4 矩陣。 | |
translate(x,y) | 定義 2D 轉換。 | 測試 |
translate3d(x,y,z) | 定義 3D 轉換。 | |
translateX(x) | 定義轉換,只是用 X 軸的值。 | 測試 |
translateY(y) | 定義轉換,只是用 Y 軸的值。 | 測試 |
translateZ(z) | 定義 3D 轉換,只是用 Z 軸的值。 | |
scale(x,y) | 定義 2D 縮放轉換。 | 測試 |
scale3d(x,y,z) | 定義 3D 縮放轉換。 | |
scaleX(x) | 通過設定 X 軸的值來定義縮放轉換。 | 測試 |
scaleY(y) | 通過設定 Y 軸的值來定義縮放轉換。 | 測試 |
scaleZ(z) | 通過設定 Z 軸的值來定義 3D 縮放轉換。 | |
rotate(angle) | 定義 2D 旋轉,在引數中規定角度。 | 測試 |
rotate3d(x,y,z,angle) | 定義 3D 旋轉。 | |
rotateX(angle) | 定義沿著 X 軸的 3D 旋轉。 | 測試 |
rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉。 | 測試 |
rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉。 | 測試 |
skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 | 測試 |
skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉換。 | 測試 |
skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉換。 | 測試 |
perspective(n) | 為 3D 轉換元素定義透視檢視。 | 測試 |
2、做的時候遇到了兩個問題:
-
圖片掀開的效果
-
滑鼠hover效果的穩定
二、圖片掀開的效果
把動畫拆開來看,感覺應該是有一個沿著X軸的旋轉,設定一下transform效果
img{
transform: rotateX(90deg);
}
但是這樣看起來更像是圖片收縮了,並沒有在視覺上產生旋轉的效果。此時,需要在img的父元素上新增perspective屬性,更改它的透視位置。
.picBox{
perspective:1000px;
}
這時候再看,效果已經差不多了,只要img再同時增加一個向上的移動效果即可。所以最後img的transform設定為
img{
transform: translateY(-320px) rotateX(90deg);
}
這樣掀開圖片的效果基本上就搞定了。但是,由於最開始把hover設定在了img自己身上,要同時設定描述文字.overLayer,就要寫成
img:hover +.overLayer
(按慣性寫空格就不會起效果。因為img和.overLayer是同級元素)這時最明顯的問題在於hover效果不穩定。
三、滑鼠hover效果的穩定
因為img在做變化,滑鼠保持不動的時候,img可能已經不在滑鼠的範圍裡面,就會產生晃晃蕩蕩忽上忽下的顫抖效果,看起來很不舒服。最好的解決方法就是把hover設定在img和.overLayer共同的父元素.picBox身上,然後分別給他們設定樣式。
.picBox
&:hover img{
transform: translateY(-320px) rotateX(90deg);
opacity: 0;
}
&:hover .overLayer{
opacity: 1;
}
}
(使用的scss)這樣效果就能穩定了。
四、html程式碼
html程式碼如下:
<div class="picBox">
<img src="../img/1.jpg" alt="">
<div class="overLayer">
<h3 class="title">title here</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis labore molestiae magni, consequatur nesciunt expedita. Dicta placeat minus sint, culpa.</p>
</div>
</div>
<div class="picBox">
<img src="../img/2.jpg" alt="">
<div class="overLayer">
<h3 class="title">title here</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut pariatur excepturi, voluptatum consectetur facere commodi at distinctio iste sapiente necessitatibus.</p>
</div>
</div>
五、執行與檔案截圖
1、檔案截圖
2、執行:
雙擊try資料夾裡面的index_try.html檔案即可看到效果
3、執行時的截圖
六、其他補充
總結:樣式寫死了尺寸,導致整體縮放時很多地方都要重寫,下次要注意改成百分比的形式,或者設定變數,便於修改。
注:本文著作權歸作者,由demo大師發表,拒絕轉載,轉載需要作者授權