概述
主要運用到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大師發表，拒絕轉載，轉載需要作者授權