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>
相关推荐
神仙别闹1 小时前
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
前端·后端·asp.net
步行cgn5 小时前
Vue 中的数据代理机制
前端·javascript·vue.js
GH小杨5 小时前
JS之Dom模型和Bom模型
前端·javascript·html
星月心城6 小时前
JS深入之从原型到原型链
前端·javascript
你的人类朋友7 小时前
🤔Token 存储方案有哪些
前端·javascript·后端
烛阴7 小时前
从零开始:使用Node.js和Cheerio进行轻量级网页数据提取
前端·javascript·后端
liuyang___7 小时前
日期的数据格式转换
前端·后端·学习·node.js·node
cnbestec7 小时前
Minktec 柔性弯曲传感器应用:3D 脊柱姿势追踪与人体活动识别
3d·minktec·minktec柔性传感器·minktec弯曲传感器·柔性传感器
字节逆旅7 小时前
老板说15分钟内把这个样式改好
css
葡萄城技术团队8 小时前
Wyn 商业智能与 3D 大屏的深度融合应用
3d·信息可视化