讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > css教程 > 正文

如何使用css实现翻转图片的效果（附代码）

不言
发布： 2018-09-25 17:57:12
原创
4772人浏览过

本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体效果图如下：

主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

立即学习“前端免费学习笔记（深入）”；

具体的步骤如下：

1、写出页面主体，

 <div>
        @@##@@
        @@##@@
    </div>
登录后复制

ListenLeap
ListenLeap

AI辅助通过播客学英语

ListenLeap 217
查看详情 ListenLeap

2、通过定位使两张图片叠加在一起

div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
登录后复制

3、设置第一张图片背面不可见

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
登录后复制

4、添加旋转180度

div:hover img {
            transform: rotateY(180deg);
        }
登录后复制

最后给出完整代码





    
    
    
    Document
    



    <div>
        @@##@@
        @@##@@
    </div>
登录后复制
如何使用css实现翻转图片的效果（附代码）如何使用css实现翻转图片的效果（附代码）如何使用css实现翻转图片的效果（附代码）如何使用css实现翻转图片的效果（附代码）

以上就是如何使用css实现翻转图片的效果（附代码）的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：如何使用CSS实现滚动的图片栏（附代码） 下一篇：如何用CSS制作一个三角形（附代码）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
布局高度塌陷导致样式错乱怎么办_通过清除浮动恢复父级高度 布局高度塌陷是父容器无法感知浮动子元素高度而收缩，解决关键是让父容器正确包含浮动子项；推荐用伪元素.clearfix::after清除浮动，兼容性好且无副作用。
2025-12-17 18:09:55
500
css浮动元素在异步图片加载时顺序错位怎么办_为图片设定宽高占位并在加载后触发布局重排或使用lazy loading策略 最直接有效的解法是为图片提前设定宽高：用HTML的width/height属性预留空间，确保浮动布局稳定；再辅以懒加载或load事件触发重排，从根源避免因图片异步加载导致的顺序错位。
2025-12-17 18:08:03
194
css定位元素宽高异常怎么办_检查是否受到absolute脱离文档流影响 元素宽高异常很可能是position:absolute导致脱离文档流；需检查是否设置了absolute及最近定位祖先，通过开发者工具验证布局，修复时应显式设置宽高或调整定位上下文。
2025-12-17 18:03:10
288
css网页在小屏幕下图片缩放异常怎么办_使用max-width:100%和object-fit 使用max-width:100%和object-fit可解决小屏幕图片缩放异常。1.设置max-width:100%;height:auto;防止图片溢出并保持宽高比。2.在固定尺寸容器中使用object-fit:cover实现图片覆盖裁剪，object-fit:contain保证完整显示。3.结合overflow:hidden和border-radius可美化头像等圆形裁剪效果。4.根据场景选择方案：内容图用max-width，展示图用object-fit。合理组合可适配多设备显示。
2025-12-17 17:54:35
933
cssflex布局下按钮间距难统一怎么办_结合gap属性控制间距 gap属性是解决Flex布局按钮间距不统一最直接可靠的方案，它专为容器内项目间隙设计，自动跳过首尾、避免margin折叠，支持响应式调整和flex-wrap换行间距，并具备良好的现代浏览器兼容性。
2025-12-17 17:53:02
432
css过渡效果顺序不对怎么办_使用transition-delay调整先后 用transition-delay可精准控制各属性动画启动时机，如background-color0.3s0s,border-width0.3s0.1s,color0.3s0.2s；避免transition:all，需单独声明属性、时长与延迟，并用开发者工具验证。
2025-12-17 17:39:07
594
CSS布局文字压到图片上怎么办_利用z-index与position重新调整层级 文字压不到图片是因层级未正确设置：文字和图片需同属一个层叠上下文，且都必须为已定位元素（如position:relative）才能使z-index生效。
2025-12-17 17:33:06
993
css边框一加布局就乱怎么办_理解border在盒模型中的占位方式 根本原因是border默认不参与width/height计算（box-sizing:content-box），导致总尺寸=内容宽高+2×border，易撑破容器；推荐统一设box-sizing:border-box实现所见即所得。
2025-12-17 17:30:09
550
Grid网格布局怎么设置两列自适应宽度_利用fr单位与auto实现Grid双列自适应 Grid双列自适应核心是fr配合auto或minmax()：基础用auto1fr实现内容驱动+剩余空间分配；进阶用minmax(120px,max-content)1fr防塌缩；等宽可用1fr1fr或1frminmax(300px,2fr)，辅以gap和justify-items提升实用性。
2025-12-17 17:23:54
153
css不改html就加装饰怎么办_利用伪元素实现装饰效果 伪元素（::before/::after）可不改HTML添加装饰，需设content及display等属性；支持绝对定位角标、双边框、背景叠加；注意不影响布局、可访问性及鼠标事件。
2025-12-17 17:20:02
129
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部