css图片3D效果(用CSS实现图片的3D凹凸感凸出镜框外或凹陷镜框里)
类别:Web前端 浏览量:221
时间:2021-11-01 10:43:06 css图片3D效果
用CSS实现图片的3D凹凸感凸出镜框外或凹陷镜框里Ⅰ、问题描述:
使用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> <li class="wrap"> <img src="pic02.jpg" alt="css图片3D效果(用CSS实现图片的3D凹凸感凸出镜框外或凹陷镜框里)" border="0" />
Ⅲ、总结
到此这篇关于用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)的文章就介绍到这了,更多相关CSS实现3D凹凸感内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css3 3d动画效果(CSS3实现任意图片lowpoly动画效果实例)
- css 自适应手机屏幕(Css实现手机端页面强制横屏的方法示例)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- css图片水平旋转动画(css实现图片横向排列滚动效果)
- css基线实例详解(移动端使用 rem 单位时 css sprites 定位问题的解决)
- css3自制像素细线(css3绘制百度的小度熊)
- css中width:auto和width:100%的区别
- css3伸缩布局及使用方法(利用CSS3的flexbox实现水平垂直居中与三列等高布局)
- html5+css样式代码(详解HTML5中CSS外观属性)
- css边框和边界教程(css 中多种边框的实现小窍门)
- css中的float的使用
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
- css可以控制网页背景图片吗(CSS实现网页背景图片自适应全屏的方法)
- css3旋转立方体效果(利用CSS实现立方体360度旋转效果实例代码)
- css3所有动画(CSS3常见动画的实现方式)
- css中三角标(使用css实现三角符号效果)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
热门推荐
- python如何将xls转成xlsx(Python这样操作能存储100多万行的xlsx文件)
- 云主机和免备案空间(香港云主机免备案利弊分析)
- php微信公众号管理后台(php实现微信公众号创建自定义菜单功能的实例代码)
- python学生管理系统与数据库(python学生管理系统学习笔记)
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- dede调用栏目路径(dede栏目列表首页与第一页链接出现重复的解决办法)
- mysql有哪些约束(MySQL完整性约束的定义与实例教程)
- python里面的time如何用(详解python:time模块用法)
- win7如何搭建serv-u服务器(使用Serv-U搭建FTP服务器以及bestsync自动同步设置图文教程)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)