立体照片旋转

简介: 旋转照片+开关灯

<style>
        body {
            perspective: 2500px;
            background-color: #000000;
        }

        .open {
            background-color: aliceblue;
        }

        .close {
            background-color: #000000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 400px;
            margin: 150px auto;
            transform-style: preserve-3d;
            transition: all 6s;
            animation: rot 10s linear infinite;
        }

        .box:hover {
            animation-play-state: paused;
        }

        @keyframes rot {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        .box div {
            position: absolute;
            border-radius: 10px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        div div:nth-child(1) {
            transform: rotateY(0) translateZ(500px);
            background: url(./img/日本和服女.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(2) {
            transform: rotateY(60deg) translateZ(500px);
            background: url(./img/迪迦.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(3) {
            transform: rotateY(120deg) translateZ(500px);
            background: url(./img/梦想的草原.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
            background: url(./img/脸上长花的女生.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(5) {
            transform: rotateY(240deg) translateZ(500px);
            background: url(./img/迪迦.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(6) {
            transform: rotateY(300deg) translateZ(500px);
            background: url(./img/梦想的草原.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <button class="btn">开/关灯</button>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var btn = document.querySelector('button');
        var flag = 1;
        // 获取body
        var bodys = document.body;
        // 点击事件
        btn.addEventListener('click', function () {
            if (flag == 0) {
                bodys.className = 'close';
                flag = 1;
            } else {
                bodys.className = 'open';
                flag = 0;
            }
        })
    </script>
</body>
AI 代码解读
目录
打赏
0
0
0
0
1
分享
相关文章
kde
|
8天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
4747 12
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
756 3
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
1147 17
|
5天前
typora免费版,激活方法,Typora使用教程
Typora是一款简洁高效的Markdown编辑器,支持即时渲染。本教程涵盖安装方法、文件操作、视图控制、格式排版、字体样式及Markdown语法,助你快速上手使用Typora进行高效写作。
981 0
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
482 7
【保姆级图文详解】大模型、Spring AI编程调用大模型
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
本文详细介绍了Maven的项目管理工具特性、安装步骤和配置方法。主要内容包括: Maven概述:解释Maven作为基于POM的构建工具,具备依赖管理、构建生命周期和仓库管理等功能。 安装步骤: 从官网下载最新版本 解压到指定目录 创建本地仓库文件夹 关键配置: 修改settings.xml文件 配置阿里云和清华大学镜像仓库以加速依赖下载 设置本地仓库路径 附加说明:包含详细的配置示例和截图指导,适用于各种操作系统环境。 本文提供了完整的Maven安装和配置
2025年最新版最细致Maven安装与配置指南(任何版本都可以依据本文章配置)
企业如何用Data Agent实现数据价值效率的飞跃
在数字化转型背景下,数据被视为“新时代的石油”,但多数企业仍面临数据价值难以高效挖掘的困境。文章深入剖析了当前数据分析中存在的“被动响应”模式及其带来的四大挑战,并提出通过Data Agent实现主动智能与数据分析民主化的新路径。Data Agent基于大语言模型和强化学习技术,具备理解、思考与行动能力,能够从“人找数据”转变为“数据找人”,推动数据洞察从专业人员走向全员参与。
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
阿里云推出基于场景的解决方案免费试用活动,新老用户均可领取100点试用点,完成部署还可再领最高100点,相当于一年可获得最高200元云资源。覆盖AI、大数据、互联网应用开发等多个领域,支持热门场景如DeepSeek部署、模型微调等,助力企业和开发者快速验证方案并上云。
377 27
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

可以解答问题、推荐解决方案等