亚洲永久精品日本久精品,自拍灌醉迷j真实半睡半醒,啪啪精品无码免费

主頁 > 知識庫 > 用CSS實現(xiàn)圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)

用CSS實現(xiàn)圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)

Ⅰ、問題描述：

使用css實現(xiàn)圖片的3D凹凸感；

Ⅱ?qū)崿F(xiàn)過程如下：

1、展示結(jié)果為：
A、正常的圖片(圖一、圖二都正常)：

B、圖一凸出鏡框外，圖二正常；
觸發(fā)過程：將鼠標(biāo)放在圖一的紅色邊框內(nèi)，就會顯示出該結(jié)果；

C、圖一正常，圖二凹陷鏡框里；
觸發(fā)過程：將鼠標(biāo)放在圖二的紅色邊框內(nèi)，就會顯示出該結(jié)果；

2、運(yùn)行軟件VScode，親測可實現(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)小近大的效果)；
            但只是感覺變了而已，而實際大小并沒有變化；
             */
        }

        .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>
<!-- 
    此時的img中的src地址：指你加載的圖片的地址
    而當(dāng)圖片的地址與代碼文檔在同一個目錄下，像上述代碼就可以簡單的來引入地址；
 -->
<div class="wrap">
    <img src="pic02.jpg"/>
</div>

</body>
</html>

Ⅲ、總結(jié)

到此這篇關(guān)于用CSS實現(xiàn)圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)的文章就介紹到這了,更多相關(guān)CSS實現(xiàn)3D凹凸感內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：銅陵綏化無錫欽州試駕邀約湖北湘西焦作

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《用CSS實現(xiàn)圖片的3D凹凸感(凸出鏡框外或凹陷鏡框里)》，本文關(guān)鍵詞用,CSS,實現(xiàn),圖片,的,凹凸,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。