当前位置: 首页 > news >正文

css 3D背景反转实现

 body{/* 透视 */perspective: 800px;
}
div{transform-style:preserve-3d;width:259px;height:396px;margin: 100px auto;position: relative;
}
div img{position: absolute;width:259px;height:396px;left:0;top:0;transition: all linear 2s;z-index: 0;
}
div img:nth-child(1){/* 这张图片背向我们的时候能否看到 */backface-visibility:hidden;z-index: 1;
}
div:active img{transform:rotateY(180deg)
}

图片可以自定义,这里我随便放置,不做要求 

    <div id="box"><img src="./pkOne.jpg" alt=""><img src="./pkTwo.jpg" alt=""></div>

相关文章:

  • NIO--07--Java lO模型详解
  • 如何打印社保参保凭证
  • python之pyqt专栏5-信号与槽1
  • 钉钉聊天审计软件有哪些
  • web前端之vue3
  • cyclictest 交叉编译与使用
  • 【ArcGIS Pro微课1000例】0040:ArcGIS Pro创建北极点、南极点
  • 公平锁和非公平锁以及他们的实现原理是什么
  • YOLOv5算法进阶改进(7)— 将主干网络SPPF更换为SimSPPF / SPP-CSPC / SPPF-CSPC
  • node.js-连接SQLserver数据库
  • 谨慎Apache-Zookeeper-3.5.5以后在CentOS7.X安装的坑
  • 程序员学习方法
  • Hdoop学习笔记(HDP)-Part.19 安装Kafka
  • Elasticsearch-Kibana使用教程
  • Vue中mvvm的作用
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • Codepen 每日精选(2018-3-25)
  • in typeof instanceof ===这些运算符有什么作用
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • Js基础——数据类型之Null和Undefined
  • markdown编辑器简评
  • mysql innodb 索引使用指南
  • npx命令介绍
  • php中curl和soap方式请求服务超时问题
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 前端技术周刊 2019-02-11 Serverless
  • 《天龙八部3D》Unity技术方案揭秘
  • 【云吞铺子】性能抖动剖析(二)
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • 策略 : 一文教你成为人工智能(AI)领域专家
  • 说说我为什么看好Spring Cloud Alibaba
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (WSI分类)WSI分类文献小综述 2024
  • (ZT)一个美国文科博士的YardLife
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (十六)一篇文章学会Java的常用API
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • (转) Android中ViewStub组件使用
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)Windows2003安全设置/维护
  • .net 获取url的方法
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .Net8 Blazor 尝鲜
  • .Net程序帮助文档制作
  • .NET简谈设计模式之(单件模式)
  • @requestBody写与不写的情况
  • [ C++ ] STL---stack与queue
  • [120_移动开发Android]008_android开发之Pull操作xml文件
  • [C#] 我的log4net使用手册
  • [C++][基础]1_变量、常量和基本类型