Ⅰ、問題描述：
使用css實現圖片的3D凹凸感；
Ⅱ實現過程如下：
1、展示結果為：
A、正常的圖片(圖一、圖二都正常)：
B、圖一凸出鏡框外，圖二正常；
觸發過程：將鼠標放在圖一的紅色邊框內，就會顯示出該結果；
C、圖一正常，圖二凹陷鏡框里；
觸發過程：將鼠標放在圖二的紅色邊框內，就會顯示出該結果；
2、運行軟件VScode，親測可實現；
3、運行代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
float: left;
width: 200px;
height: 300px;
border: 1px solid red;
margin: 100px 0 0 100px;
perspective:500px;
/*
"perspective:500px;"指： 透視距離(遠小近大的效果)；
但只是感覺變了而已，而實際大小并沒有變化；
*/
}
.wrap img {
transition: 0.5s;
}
.wrap:nth-child(1):hover img {
transform: translateZ(100px);
/* "translateZ(100px);"指： 往Z軸正方向平移100px(垂直屏幕往外為正); */
}
.wrap:nth-child(2):hover img {
transform: translateZ(-100px);
/* "translateZ(-100px);"指：往Z軸負方向平移100px(垂直屏幕往里為負); */
}
</style>
</head>
<body>
<div class="wrap">
<img src="pic02.jpg"/>
</div>
<!--
此時的img中的src地址：指你加載的圖片的地址
而當圖片的地址與代碼文檔在同一個目錄下，像上述代碼就可以簡單的來引入地址；
-->
<div class="wrap">
<img src="pic02.jpg"/>
</div>
</body>
</html>
Ⅲ、總結
到此這篇關于用CSS實現圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)的文章就介紹到這了,更多相關CSS實現3D凹凸感內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
