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

3D相框案例讲解（详细）

news 2026/4/2 8:55:47

前言

通过现阶段的学习，我们已经掌握了HTML，CSS和JS部分的相关知识点，现在让我们通过一篇案例，来巩固我们近期所学的知识点。

详细视频讲解戳这里

任务一了解目标案例样式

1.1了解案例

3D相框

1.2 分析案例

首先我们看到一个完整的图片被分成16份，每张小图片都有黄色阴影衬托除3D效果，当我们点击按钮时，所有小图片按Z轴旋转360°并合称为一张照片，此时大照片也有黄色阴影衬托3D效果，再次点击按钮，大图片一同样的方式变回小照片。

源图片

1.3 整理思路

在HTML中创建按钮部分以及一个盒子。在CSS中修饰按钮，设置图片，定义图片移动方向及方式，定义阴影。在JS中实现按钮与盒子的交互，以及将一张图片分成16等份。

任务二创建3D相框文件包

创建一个本地文件

将源代码，以及所需图片放在一起。

任务三 HTML框架部分

3.1 按钮部分

按钮部分简单，仅需id和类名即可

<button id="a" class="c">Magic </button>

3.2 盒子部分

盒子部分同理，不同点是有两个类名，因为以后照片要向外扩，所以有两个类名，分别适应不同情况。

任务四 CSS初始样式部分

4.1 body样式

box-sizing: border-box;

}

body {

background-color: rgb(255, 255, 255);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

*{ } 这是一个通用选择器

flex-direction: column; - 这个属性设置flex容器的主轴方向为垂直

align-items: center; - 这个属性设置flex容器内项目在交叉轴上的对齐方式。

justify-content: center; - 这个属性设置flex容器内项目在主轴上的对齐方式。

4.2 按钮样式

.c{

background-color: #f9ca25;

color: #ffffff;

border: 0;

border-radius: 5px;

font-size: 18px;

padding: 12px 20px;

cursor: pointer;

position: fixed;

top: 30px;

z-index: 1;

}

border-radius: 5px; - 设置元素的边框圆角为5像素。

cursor: pointer; - 当鼠标悬停在元素上时，鼠标光标会变成指针形状。

position: fixed; - 设置元素的位置为固定定位。

z-index: 1; - 设置元素的堆叠顺序为1。

运行如下：

4.3 盒子样式

.c1{

display: flex;

flex-wrap: wrap;

justify-content: space-around;

width: 500px;

height: 500px;

position: relative;

}

.c2{

width: 600px;

height: 600px;

}

c1为图片完整前盒子，c2为图片拆分后盒子大小。

flex-wrap: wrap; - 设置flex容器的换行行为。

justify-content: space-around; - 设置flex容器内项目在主轴上的对齐方式。

position: relative; - 设置元素的位置为相对定位。

任务五 JS交互部分

5.1 按钮与盒子交互

const r1 = document.getElementById('b')

const r2 = document.getElementById('a')

r2.addEventListener('click', () => r1.classList.toggle('c2'))

意为实现id为a和id为b相互交互

任务六 JS图片分裂

6.1 功能实现

function fun(){

for(let i = 0; i <= 3; i++){

for(let j= 0; j <= 3; j++){

const x = document.createElement('div')

x.classList.add('x')

x.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`

r1.appendChild(x)

}

fun()

这里我们定义了一个名为fun的函数，并在函数内部创建了一个4x4的div元素网格。每个div元素都被添加到一个名为r1的容器中，并且每个div都有一个x类。

详情解析：

定义了一个名为fun的函数
开始一个外层循环，循环变量i从0开始，直到小于或等于3（即循环4次）。
在外层循环内部，开始一个内层循环，循环变量j从0开始，直到小于或等于3（即循环4次）。
在内层循环内部，创建一个新的div元素，并将其赋值给常量x。
给新创建的div元素添加一个名为x的类。这使得该元素可以通过CSS样式进行样式化。
设置新创建的div元素的backgroundPosition样式属性。这里使用了模板字符串来计算背景图片的位置。-j * 125和-i * 125的计算结果用于确定背景图像的显示位置。
将新创建的div元素x添加到名为r1的容器中。
调用fun函数，执行上述代码，创建并添加16个div元素到r1容器中。

任务七 CSS修饰图片

7.1 图片部分

.x{

background-image: url('../源代码/EZqwsBSPlvSda.webp');

background-repeat: no-repeat;

background-size: 500px 500px;

position: relative;

width: 125px;

height: 125px;

transition: 0.7s ease;

}

background-repeat: no-repeat; - 设置背景图像不重复。

position: relative; - 设置元素的位置为相对定位。

transition: 0.7s ease; - 定义一个过渡效果，当元素的某些属性值发生变化时，这个过渡效果会被应用。

.c1.c2 .x{

trandform: rotateZ(360deg);

}

这里我们使用了后代选择器和类选择器的组合来应用样式。

transform: rotateZ(360deg); - 这个属性应用了一个CSS变换，使得匹配的元素围绕Z轴旋转360度。

7.2 3D背景阴影部分

.x::after{

content: '';

background-color: #f6e58d;

position: absolute;

top: 8px;

right: -15px;

height: 100%;

width: 15px;

transform: skewY(45deg);

}

.x::before{

content: '';

background-color: #f9ca25;

position: absolute;

bottom: -15px;

left: 8px;

height: 15px;

width: 100%;

transform: skewX(45deg);

}

这段CSS代码使用了伪元素::after和::before来给具有类x的元素添加装饰性的效果。

position: absolute; - 将伪元素的定位设置为绝对定位。

transform: skewY(45deg); - 应用一个Y轴倾斜的变换效果，倾斜角度为45度，使得伪元素沿Y轴倾斜。

整合代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{box-sizing: border-box;}body {background-color: rgb(255, 255, 255);display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.c{background-color: #f9ca25;color: #ffffff;border: 0;border-radius: 5px;font-size: 18px;padding: 12px 20px;cursor: pointer;position: fixed;top: 30px;z-index: 1;}.c1{display: flex;flex-wrap: wrap;justify-content: space-around;width: 500px;height: 500px;position: relative;}.c2{width: 600px;height: 600px;}.c1.c2 .x{transform: rotateZ(360deg);}.x{background-image: url(.//3d.webp);background-repeat: no-repeat;background-size: 500px 500px;position: relative;width: 125px;height: 125px;transition: 0.7s ease;  }.x::after{content: '';background-color: #f6e58d;position: absolute;top: 8px;right: -15px;height: 100%;width: 15px;transform: skewY(45deg);}.x::before{content: '';background-color: #f9ca25;position: absolute;bottom: -15px;left: 8px;height: 15px;width: 100%;transform: skewX(45deg);}</style>
</head>
<body><button id="a" class="c">Magic </button><div id="b" class="c1 c2"></div><script>const r1 = document.getElementById('b')const r2 = document.getElementById('a')r2.addEventListener('click', () => r1.classList.toggle('c2'))function fun(){for(let i = 0; i <= 3; i++){for(let j= 0; j <= 3; j++){const x = document.createElement('div')x.classList.add('x')x.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`r1.appendChild(x)}}}fun()</script>
</body>
</html>

效果图

将全体代码写完后运行

3D相框

3D相框案例讲解（详细）

前言通过现阶段的学习，我们已经掌握了HTML，CSS和JS部分的相关知识点，现在让我们通过一篇案例，来巩固我们近期所学的知识点。详细视频讲解戳这里任务一了解目标案例样式 1.1了解案例 3D相框 1.2 分析案例首先我们看到一个…...

编程日记 2024/12/17 10:13:42

制作安装包

使用打包工具（如 NSIS、Inno Setup、Advanced Installer）制作安装包。示例：Inno Setup 制作安装包 Inno Setup Inno Setup 是一个免费且强大的安装包制作工具，可以用来打包 Qt 项目或其他软件程序。以下是使用 Inno Setup 制作…...

编程日记 2024/12/17 10:10:37

P8615 拼接平方数 P8699 排列数

文章目录 [蓝桥杯 2014 国 C] 拼接平方数[蓝桥杯 2019 国 B] 排列数 [蓝桥杯 2014 国 C] 拼接平方数题目描述小明发现 49 49 49 很有趣，首先，它是个平方数。它可以拆分为 4 4 4 和 9 9 9，拆分出来的部分也是平方数。 169 169 169 也有…...

编程日记 2024/12/17 10:09:36

【C语言】拆解C语言的编译过程

前言学习C语言的过程中，涉及到各种各样的关键词，在我们点击编译的时候，都会做什么呢？让我们来拆解一下 C语言的编译过程 C语言的编译过程包括预处理、编译、汇编和链接四个主要步骤。每个步骤都有其特定的任务和输出文件类型&am…...

编程日记 2024/12/17 10:07:34

【C++】青蛙跳跃问题解析与解法

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述第一部分：基本青蛙过河问题第二部分：石柱和荷叶问题 💯解题思路与分析第一部分：青蛙过河问题解法思路：递…...

编程日记 2024/12/17 10:06:32

自动驾驶AVM环视算法--python版本的俯视TOP投影模式

c语言版本和算法原理的可以查看本人的其他文档。《自动驾驶AVM环视算法--全景的俯视图像和原图》本文档进用于展示部分代码的视线，获取方式网盘自行获取（非免费介意勿下载）：链接: https://pan.baidu.com/s/1MJa8ZCEfNyLc5x0uVegto…...

编程日记 2024/12/17 10:05:31

Go 语言与时间拳击理论下的结对编程：开启高效研发编程之旅

一、引言结对编程作为一种软件开发方法，在提高代码质量、增强团队协作等方面具有显著优势。而时间拳击理论为结对编程带来了新的思考角度。本文将以 Go 语言为中心，深入探讨时间拳击理论下的结对编程。在当今软件开发领域，高效的开发方法和…...

编程日记 2024/12/17 10:04:29

Qt+OPC开发笔记（一）：OPCUA介绍、open62541介绍、编译与基础环境Demo

若该文为原创文章，转载请注明原文出处本文章博客地址：https://hpzwl.blog.csdn.net/article/details/144516882 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV…...

编程日记 2024/12/17 10:02:27

ElasticSearch 常见故障解析与修复秘籍

文章目录一、ElasticSearch启动服务提示无法使用root用户二、ElasticSearch启动提示进程可拥有的虚拟内存少三、ElasticSearch提示用户拥有的可创建文件描述符太少四、ElasticSearch集群yellow状态分析五、ElasticSearch节点磁盘使用率过高，read_only状态问题解决六…...

编程日记 2024/12/17 9:58:22

序列模型的使用示例

序列模型的使用示例 1 RNN原理1.1 序列模型的输入输出1.2 循环神经网络（RNN）1.3 RNN的公式表示2 数据的尺寸 3 PyTorch中查看RNN的参数4 PyTorch中实现RNN（1）RNN实例化（2）forward函数（3&#xf…...

编程日记 2024/12/17 9:57:20

对rust的全局变量使用drop方法

文章目录 rust处理全局变量的策略方法1：在main中自动Drop全局变量参考 rust处理全局变量的策略 Rust 的静态变量不会在程序退出时自动调用 Drop，因为它们的生命周期与进程绑定。 use std::sync::OnceLock;struct GlobalData {content: String, }impl …...

编程日记 2024/12/17 9:52:13

Node.js教程入门第一课：环境安装

对于一个程序员来说，每学习一个新东西的时候，第一步基本上都是先进行环境的搭建！ 从本章节开始让我们开始探索Node.js的世界吧! 什么是Node.js? 那么什么是Node.js呢？简单的说Node.js 就是运行在服务端的 JavaScript JavaScript…...

编程日记 2024/12/17 9:50:10

Visual Studio 使用 GitHub Copilot 扩展

🎀🎀🎀【AI辅助编程系列】🎀🎀🎀 Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码Visual Studio 安装和管理 GitHub CopilotVisual Studio 使用 GitHub Copilot 扩展Visual Studio 使用 GitHu…...

编程日记 2024/12/17 9:49:04

【Qualcomm】IPQ5018获取TR069 WiFi 接口Stats状态方法

IPQ5018 简介 IPQ5018 是高通（Qualcomm）公司推出的一款面向网络设备的系统级芯片（SoC）。它通常用于路由器、接入点和其他网络设备中，提供高性能的无线网络连接。以下是关于 IPQ5018 的一些关键特性和功能：关键特性高性能处理器 IPQ5018 集成了多核 CPU，通常是 ARM …...

编程日记 2024/12/17 9:48:01

数字营销咨询，照亮企业营销数字化每一步

在快消品领域，面对市场竞争日益激烈的现状，营销端的数字化升级已经成为企业生意增长的重要驱动力。然而，鉴于营销端数字化建设的高昂成本及其广泛覆盖的业务范畴，企业在启动此类项目之前，通常会遭遇一系列挑战与顾虑&…...

编程日记 2024/12/17 9:47:00

修改vscode中emmet中jsx和tsx语法中className的扩展符号从单引号到双引号 - HTML代码补全 - 单引号双引号

效果图实现步骤文件 > 首选项 > 设置搜索“”在settings.json中修改，增加 "emmet.syntaxProfiles": {"html": {"attr_quotes": "single"},"jsx": {"attr_quotes": "double","…...

编程日记 2024/12/17 9:45:59

【Cmake】

1 设置安装路径 -DCMAKE_INSTALL_PREFIX"安装路径"2 使用交叉编译 -DCMAKE_C_COMPILE"交叉编译器绝对路径"3 编译静态库 -DPAHO_BUILD_STARTTRUE...

编程日记 2024/12/17 9:44:56

Flutter 内嵌 unity3d for android

前言： 最近刚整完 unity3d hybridCLR 更新代码和资源，我们趁热打铁将 Unity3D 嵌入 Flutter 应用中。实现在 Flutter 使用 Unity3D, 可以做小游戏大游戏； 之前都是内嵌 Webview 来实现的。虽然 CocosCreator 做出来的效果也不错&#xf…...

编程日记 2024/12/17 9:43:55

sqlite加密-QtCipherSqlitePlugin 上

1、下载并解压软件 https://download.csdn.net/download/notfindjob/90140129 2、编译（可支持Qt5.12编译） 3、安装插件...

编程日记 2024/12/17 9:37:49

正交投影 (Orthographic Projection) 详解

正交投影 (Orthographic Projection) 详解正交投影是一种将三维空间中的物体投影到二维平面上的方法，它在计算机图形学、建筑设计、工程绘图等领域中广泛应用。与透视投影不同，正交投影不会随着距离的变化而改变物体的大小，因此所有平行线在…...

编程日记 2024/12/17 9:34:46

PyTorch 2.8镜像实操手册：基于40G数据盘的视频生成训练环境搭建

PyTorch 2.8镜像实操手册：基于40G数据盘的视频生成训练环境搭建 1. 环境准备与快速部署在开始视频生成训练之前，我们需要先准备好硬件环境和镜像部署。本镜像专为RTX 4090D显卡优化，配备了24GB显存和CUDA 12.4支持，能够高效处理…...

编程新知 2026/4/2 8:09:55

LeetCode 最长回文子串：python 题解

一、核心问题及解决方案（按踩坑频率排序） 问题 1：误删他人持有锁——最基础也最易犯的漏洞成因：释放锁时未做身份校验，直接执行 DEL 命令删除键。典型场景：服务 A 持有锁后，业务逻辑耗时超过锁…...

编程新知 2026/4/2 7:51:31

QMCDecode：3分钟快速解锁QQ音乐加密文件，实现跨平台音乐自由

QMCDecode：3分钟快速解锁QQ音乐加密文件，实现跨平台音乐自由【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac，qmc0,qmc3转mp3, mflac,mflac0等转flac)，仅支持macOS，可自动识别到QQ音乐下载目录…...

编程新知 2026/4/2 7:47:24

FireRedASR-AED-L本地化教程：国产统信UOS/麒麟系统全兼容部署方案

FireRedASR-AED-L本地化教程：国产统信UOS/麒麟系统全兼容部署方案提示：本教程已在统信UOS 20、麒麟V10系统完成实测验证，同样适用于Ubuntu、CentOS等Linux发行版 1. 项目简介：为什么选择这个工具？ 如果你正在寻找一个…...

编程新知 2026/4/2 6:34:38

EVA-01效果展示：多场景图文问答案例，看AI如何精准识别与深度分析

EVA-01效果展示：多场景图文问答案例，看AI如何精准识别与深度分析 1. 视觉神经同步系统初体验当你第一次打开EVA-01视觉神经同步系统，最直观的感受就是它独特的"暴走白昼"界面设计。与传统AI工具常见的深色背景不同，这…...

编程新知 2026/4/2 4:55:36

学历作为硬实力：当代中国权力结构中知识资本的制度化逻辑与社会地位再生产机制

学历作为硬实力：当代中国权力结构中知识资本的制度化逻辑与社会地位再生产机制作者：培风图南以星河揽胜专栏链接：澄心观道字数：约 14,200 字 | 阅读时长：约 52 分钟引言：一个被广泛观察却少有深究的社会…...

编程新知 2026/4/2 4:23:17

【TCC从理论到亿级支付系统落地】：7个真实生产环境故障复盘+可直接套用的补偿模板

第一章：TCC分布式事务的核心原理与适用边界TCC（Try-Confirm-Cancel）是一种基于业务层面的柔性事务模型，其核心在于将一个分布式事务拆解为三个明确阶段：资源预留（Try）、最终确认（Con…...

编程新知 2026/4/2 3:03:29

3步搞定iOS微信聊天记录完整导出：WeChatExporter终极指南

3步搞定iOS微信聊天记录完整导出：WeChatExporter终极指南【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 还在为无法备份微信聊天记录而烦恼吗？微…...

编程新知 2026/4/2 2:53:18

循环冷却水流量示意图设计建筑水流量示意图绘制教程

一、引言在建筑给排水、暖通空调及工业循环水系统设计中，循环冷却水流量示意图与建筑水流量示意图是核心技术图纸之一，其作用是直观呈现水流路径、管径规格、流量分配、设备连接关系及压力节点参数，为系统施工、调试、运维及故障排查提供可…...

编程新知 2026/4/2 2:43:04

Polars 2.0清洗性能天花板在哪？实测对比Dask/Modin/Vaex：单机1TB数据清洗仅需11.3秒（附完整安装脚本）

第一章：Polars 2.0 大规模数据清洗技巧Polars 2.0 引入了更严格的惰性执行模型、增强的字符串与时间处理能力，以及原生支持多线程 I/O 的 LazyFrame API，显著提升了 TB 级数据清洗的吞吐与可控性。相比 Pandas，其列式内存布局与零…...

编程新知 2026/4/2 0:51:48

前言

任务一 了解目标案例样式