首页 > 作文

用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)

更新时间:2023-04-07 18:40:06 阅读：评论：0

ⅰ、问题描述：

使用css实现图片的3d凹凸感；

ⅱ实现过程如下：

1、展示结果为：
a、正常的图片(图一、千x万x的成语图二都正常)：

b、图一凸出镜框外，图二正常；
触发过程：将鼠标放在图一的红色边框内，就会显示出该结果；

c、图一正常，图二凹陷镜框里；
触发过程：将鼠标放在图二的红色边框内，就会显示出该结果；

2、运行软件vscode，亲测可实现；

3、运行代码：

<!doctype html><html><head lang="en">    <meta chart="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轴负方向平移10黄家驹死亡0px(垂直屏幕往里为负); */        }          </style></head><body><div 敕勒川的古诗class="wrap">    <img src="pic02.jpg"/></div><!--     此时的img中的src地址：指你加载的图片的地址    而当图片的地址与代码文档在同一个目录下，像上述代码就可以简单的来引入地址； --><div class="wrap">    <img src="pic02.jpg"/></div></body></html>