深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › html教程 › css实现图片正反面翻转特效
返回列表 发新帖
查看: 999|回复: 0

css实现图片正反面翻转特效

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-1-21 13:51:03 | 999 | 0 | 显示全部楼层 |阅读模式
admin 2022-1-21 13:51:03 999 0 显示全部楼层
css实现图片正反面翻转特效
html代码如下：
  1. <div class="father">
  2.                 <div class="before">正面</div>
  3.                 <div class="after">反面</div>
  4. </div>
复制代码
css样式代码如下：
  1. .father{
  2.         width: 300px;
  3.         height: 200px;
  4.         position: relative;
  5.         transition: all 1s linear;
  6.         transform-style: preserve-3d;
  7.         }
  8. .before,.after{
  9.         width: 300px;
  10.         height: 200px;
  11.         position: absolute;
  12.         top: 0;
  13.         left: 0;
  14. }
  15. .before{
  16.         background: red;
  17. }
  18. .after{
  19.         background: lightblue;
  20.         transform: rotateX(-180deg);
  21. }
  22. .father:hover{
  23.         transform: rotateX(180deg);
  24. }
复制代码
注意事项：
        ps:1. 若缺少transform-style:preserve-3d；图片翻转效果就无法实现，实现翻转的关键
        2. transform-style属性需要配合transform属性使用，默认值是flat（子元素保留其3D位置。在2D平面呈现）；preserve-3d（子元素保留其3D位置）。

css样式, css教程
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表