Ⅰ、問題描述：
使用css實(shí)現(xiàn)圖片的3D凹凸感；
Ⅱ?qū)崿F(xiàn)過程如下：
1、展示結(jié)果為：
A、正常的圖片(圖一、圖二都正常)：
B、圖一凸出鏡框外，圖二正常；
觸發(fā)過程：將鼠標(biāo)放在圖一的紅色邊框內(nèi)，就會(huì)顯示出該結(jié)果；
C、圖一正常，圖二凹陷鏡框里；
觸發(fā)過程：將鼠標(biāo)放在圖二的紅色邊框內(nèi)，就會(huì)顯示出該結(jié)果；
2、運(yùn)行軟件VScode，親測(cè)可實(shí)現(xiàn)；
3、運(yùn)行代碼：
<!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;"指： 透視距離(遠(yuǎn)小近大的效果)；
但只是感覺變了而已，而實(shí)際大小并沒有變化；
*/
}
.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軸負(fù)方向平移100px(垂直屏幕往里為負(fù)); */
}
</style>
</head>
<body>
<div class="wrap">
<img src="pic02.jpg"/>
</div>
<!--
此時(shí)的img中的src地址：指你加載的圖片的地址
而當(dāng)圖片的地址與代碼文檔在同一個(gè)目錄下，像上述代碼就可以簡(jiǎn)單的來(lái)引入地址；
-->
<div class="wrap">
<img src="pic02.jpg"/>
</div>
</body>
</html>
Ⅲ、總結(jié)
到此這篇關(guān)于用CSS實(shí)現(xiàn)圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)的文章就介紹到這了,更多相關(guān)CSS實(shí)現(xiàn)3D凹凸感內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
