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

Ⅰ、问题描述：

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

Ⅱ实现过程如下：

1、展示结果为：

A、正常的图片(图一、图二都正常)：

B、图一凸出镜框外，图二正常；

触发过程：将鼠标放在图一的红色边框内，就会显示出该结果；

C、图一正常，图二凹陷镜框里；

触发过程：将鼠标放在图二的红色边框内，就会显示出该结果；

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

3、运行代码：

.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(垂直屏幕往里为负); */

}

Ⅲ、总结

到此这篇关于用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)的文章就介绍到这了,更多相关CSS实现3D凹凸感内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！