css 3D背景反转实现

css 复制代码
 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)
}

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

html 复制代码
    <div id="box">
        <img src="./pkOne.jpg" alt="">
        <img src="./pkTwo.jpg" alt="">
    </div>
相关推荐
用户21496515898757 分钟前
从零搭建uniapp环境-记录
前端
努力写代码的熊大2 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER2 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh2 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒2 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐3 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖4 小时前
Webpack系列-Entry入口
前端·webpack
mustfeng4 小时前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia4 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙4 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss