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

CSS系列（9）-- Transform 变换详解

news 来源：原创 2025/6/21 17:45:49

前端技术探索系列：CSS Transform 变换详解 🔄

致读者：探索 CSS 变换的魔力 👋

前端开发者们，

今天我们将深入探讨 CSS Transform，学习如何创建引人注目的 2D 和 3D 变换效果。

2D 变换基础 🚀

基础变换函数

/* 基础变换 */
.transform-2d {/* 平移 */transform: translate(50px, 30px);transform: translateX(50px);transform: translateY(30px);/* 缩放 */transform: scale(1.5);transform: scaleX(1.5);transform: scaleY(0.8);/* 旋转 */transform: rotate(45deg);/* 倾斜 */transform: skew(10deg, 20deg);transform: skewX(10deg);transform: skewY(20deg);
}/* 组合变换 */
.combined-transform {transform: translate(50px, 30px) rotate(45deg) scale(1.5);
}/* 变换原点 */
.transform-origin {transform-origin: left top;transform: rotate(45deg);
}

实用 2D 效果

/* 悬停效果 */
.hover-card {transition: transform 0.3s ease;
}.hover-card:hover {transform: translateY(-10px) scale(1.05);
}/* 翻转卡片 */
.flip-card {perspective: 1000px;
}.flip-card-inner {transition: transform 0.6s;transform-style: preserve-3d;
}.flip-card:hover .flip-card-inner {transform: rotateY(180deg);
}

3D 变换详解 🎯

3D 变换基础

/* 3D 变换设置 */
.transform-3d {/* 3D 平移 */transform: translate3d(x, y, z);transform: translateZ(50px);/* 3D 旋转 */transform: rotate3d(1, 1, 1, 45deg);transform: rotateX(45deg);transform: rotateY(45deg);transform: rotateZ(45deg);/* 3D 视角 */perspective: 1000px;perspective-origin: center center;
}/* 3D 空间 */
.space-3d {transform-style: preserve-3d;backface-visibility: hidden;
}

创意 3D 效果

/* 3D 翻书效果 */
.book {perspective: 1000px;
}.page {transform-origin: left center;transition: transform 0.6s;
}.page:hover {transform: rotateY(-180deg);
}/* 3D 立方体 */
.cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;animation: rotate 10s infinite linear;
}.cube-face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;
}.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

实践项目：3D 转换器 🛠️

class Transform3DGenerator {constructor(options = {}) {this.options = {perspective: 1000,rotationSpeed: 0.5,easing: 'ease',...options};this.init();}init() {this.createStyles();this.setupControls();this.setupAnimations();}createStyles() {const style = document.createElement('style');style.textContent = this.generateStyles();document.head.appendChild(style);}generateStyles() {return `.transform-container {perspective: ${this.options.perspective}px;perspective-origin: 50% 50%;}.transform-element {transform-style: preserve-3d;transition: transform ${this.options.rotationSpeed}s ${this.options.easing};}.transform-face {position: absolute;backface-visibility: hidden;}${this.generateAnimationStyles()}`;}generateAnimationStyles() {return `@keyframes rotate3d {from {transform: rotate3d(1, 1, 1, 0deg);}to {transform: rotate3d(1, 1, 1, 360deg);}}.rotate-animation {animation: rotate3d 10s infinite linear;}`;}createTransform(element, transforms) {const matrix = this.calculateTransformMatrix(transforms);element.style.transform = `matrix3d(${matrix.join(',')})`;}calculateTransformMatrix(transforms) {// 计算3D变换矩阵let matrix = [1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,0, 0, 0, 1];transforms.forEach(transform => {matrix = this.multiplyMatrices(matrix, this.getTransformMatrix(transform));});return matrix;}getTransformMatrix({ type, value }) {// 根据变换类型返回对应的变换矩阵switch(type) {case 'rotate':return this.getRotationMatrix(value);case 'translate':return this.getTranslationMatrix(value);case 'scale':return this.getScaleMatrix(value);default:return this.getIdentityMatrix();}}setupAnimations() {document.querySelectorAll('.transform-element').forEach(element => {element.addEventListener('mouseover', () => {this.startAnimation(element);});element.addEventListener('mouseout', () => {this.stopAnimation(element);});});}startAnimation(element) {const animation = element.dataset.animation;if (animation) {element.style.animation = animation;}}stopAnimation(element) {element.style.animation = 'none';}
}

最佳实践建议 💡

变换使用
- 选择合适的变换方式
- 注意变换顺序
- 设置合适的视角
- 控制动画效果
性能优化
- 使用 transform 代替位置改变
- 开启硬件加速
- 避免频繁重排
- 优化动画性能
3D 效果
- 合理设置视角
- 注意背面可见性
- 维护 3D 空间
- 控制动画流畅度

写在最后 🌟

CSS Transform 为我们提供了强大的变换能力，合理运用这些特性可以创造出令人印象深刻的视觉效果。

进一步学习资源 📚

3D 变换进阶
动画优化指南
创意效果集合
性能优化技巧

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

CSS系列（9）-- Transform 变换详解

前端技术探索系列：CSS Transform 变换详解 🔄 致读者：探索 CSS 变换的魔力 👋 前端开发者们， 今天我们将深入探讨 CSS Transform，学习如何创建引人注目的 2D 和 3D 变换效果。 2D 变换基础 &#x1f68…...

编程日记 2025/6/21 17:45:49

bs4基本运用

1. bs4基本使用 1.1. 简介 bs4的全称为 BeautifulSoup。和lxml一样，是一个html的解析器，主要功能也是解析数据和提取数据。本模块作为了解模块，实际开发中很少用这个模块去解析数据，大家可能会想为什么这个模块会逐渐被淘汰&…...

编程日记 2025/5/29 15:18:09

基础环境 apache-skywalking-apm-9.6.0.tar.gz apache-skywalking-java-agent-9.1.0.tgz elasticsearch 7.14.1 采用dockers搭建或者手动部署 kibana 可视化应用微服务版 consumer.jar eureka.jar 注册中心 provider.jar skywalking 地址 https://skywalkin…...

编程日记 2025/6/4 8:08:30

C# 和 go 关于can通信得整理

在C#中开发CAN（Controller Area Network）通信接口时，确实有一些现成的NuGet包可以简化你的开发工作。这些库通常提供了与CAN硬件接口通信所需的基本功能，如发送和接收CAN消息。下面是一些常用的NuGet包： PCANBasic.NET…...

编程日记 2025/6/20 20:11:55

Unity类银河战士恶魔城学习总结（P179 Enemy Archer 弓箭手）

教程源地址：https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了敌人弓箭手的制作 Enemy_Archer.cs 核心功能状态机管理敌人的行为定义了多个状态对象（如 idleState、moveState、attackState 等），通过状态机管理敌人的…...

编程日记 2025/6/22 1:42:18

一、LRU缓存

LRU缓存 1.LRU缓存介绍2.LRU缓存实现3.LRU缓存总结3.1 LRU 缓存的应用3.2 LRU 缓存的优缺点 1.LRU缓存介绍 LRU是Least Recently Used 的缩写，意为“最近最少使用”。它是一种常见的缓存淘汰策略，用于在缓存容量有限时，决定哪些数据需要被删…...

编程日记 2025/6/22 0:52:02

基于python绘制数据表（上）

利用python绘制各种数据图表绘制柱形图-源码 from openpyxl import Workbook from openpyxl.chart import BarChart, Reference# 创建工作薄 wb Workbook(write_onlyTrue) # 创建工作表 ws wb.create_sheet(月收入)# 准备数据 rows [(月份, 销售额),(1, 23),(2, 43),(3, …...

编程日记 2025/6/22 1:05:58

Python Segmentation fault错误定位办法

1. 说明 Python3执行某一个程序时，报Segmentation fault (core dumped)错，但没有告知到底哪里出错，无法查问题，这时就需要一个库faulthandler来帮助分析。 2. 安装faulthandler faulthandler在Python3.3之后成为标准库&#xf…...

编程日记 2025/6/4 11:18:12

快速在远程服务器执行命令、批量在多个服务器执行命令（基于sshpass的自定义脚本fastsh）

在日常服务器操作中，很多时候我们需要同时操作多个服务器。特别对于那些每个服务器都需要操作相同命令的场景，不断的切换命令会话窗口会比较麻烦。基于此，编写了本文中的 fastsh 脚本用于轻度解决这种问题，提高一定的便利性。使…...

编程日记 2025/6/19 19:20:25

Java基于SpringBoot的企业OA管理系统，附源码

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/6/22 0:45:06

SSM 垃圾分类系统——环保领域的创新引擎

第1章概述 1.1 研究背景随着现代网络技术发展，对于垃圾分类系统现在正处于网络发展的阶段，所以对它的要求也是比较严格的，要从这个系统的功能和用户实际需求来进行对系统制定开发的发展方式，依靠网络技术的的快速发展和现代通讯…...

编程日记 2025/6/20 21:03:03

websocker的java集成过程

第一步：引入依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 第二步设置配置类： // 需要注入Bean的话必须声明为配置类 Co…...

编程日记 2025/6/21 1:32:26

如何对小型固定翼无人机进行最优的路径跟随控制？

控制架构文章继续采用的是 ULTRA-Extra无人机，相关参数如下： 这里用于guidance law的无人机运动学模型为： { x ˙ p V a cos ⁡ γ cos ⁡ χ V w cos ⁡ γ w cos ⁡ χ w y ˙ p V a cos ⁡ γ sin ⁡ χ V w cos ⁡ γ w sin ⁡ χ…...

编程日记 2025/6/21 1:41:01

03、对象的内存布局以及分配方式

在通过前面的文章了解到当一个程序启动的时候，会把一个java文件通过编译成class文件，然后把class字节码加载到JVM内存中，并初始化各种变量和对象实例，同时建立起具体的内存模型进行线程间的数据交换，在这之间对象的实例…...

编程日记 2025/6/20 8:34:02

「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门

本篇将通过 Python 和 Cangjie 双语介绍动态规划的基本概念，并解决一个经典问题：斐波那契数列。学生将学习如何使用动态规划优化递归计算，并掌握编程中的重要算法思想。关键词小学奥数Python Cangjie动态规划斐波那契数列一、题目描述 …...

编程日记 2025/6/4 0:09:59

ADB在浏览器中：ya-webadb项目安装与配置完全指南

ADB在浏览器中：ya-webadb项目安装与配置完全指南 ya-webadb ADB in your browser [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ya/ya-webadb 项目基础介绍与编程语言 ya-webadb 是一个由 Yume-chan 开发的开源项目，它实现了ADB&#x…...

编程日记 2025/5/30 15:51:58

通过ros2启动gazebo

ros2_integration3.使用gazebo加载URDF 在老版本中，我们使用 gazebo --verbose -s libgazebo_ros_init.so -s libgazebo_ros_factory.so来启动gazebo和ros2与gazebo的桥。但在新版本中，libazebo_ros_init.so和libazebo_ros_factory.so不再被支持你…...

编程日记 2025/6/21 1:38:56

WPF 消息循环（二）

们已经知道，win32/MFC/WinForm/WPF 都依靠消息循环驱动，让程序跑起来。这里就介绍 WPF 中是如何使用消息循环来驱动程序的。 1. 背景只听说过 Dispatcher ，哪里来的消息循环？ WPF 启动运行堆栈： > WpfApp1.…...

编程日记 2025/6/2 10:39:54

基于stm32的红外测温系统设计（论文+源码）

1总体方案设计本课题为基于STM32的红外测温系统设计，在此将系统架构设计如图3.1所示， 整个系统包括STM32F103单片机，红外测温模块MLX90614，显示模块OLED12864，蜂鸣器以及按键等构成，在功能上，…...

编程日记 2025/6/2 9:43:09

分布式 Paxos算法总结

前言相关系列《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》参考文献《图解超难理解的 Paxos 算法（含伪代码）》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…...

编程日记 2025/5/31 5:28:36

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小文章目录 ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小1. 安装 Times New Roman 字体验证字体是否安装成功 2. 在 Matplotlib 中加载 Times New Roman 字体3. 在 Matplotlib 中使…...

编程日记 2025/6/21 1:28:34

[网络] UDP协议16位校验和

16位校验和是udp报头中的一个字段,绝大多数的教材和网课都会忽略这个字段,不去细究,我闲的蛋疼问了问ai,得到了一个答案,故作此文,以证明我爱学习之心惊天地泣鬼神(狗头 ai的回答仅从作用来说,它会根据整个应用层报文进行运算,生成一个准确的数字,这个数字不能保证唯一性,但根…...

编程日记 2025/6/2 10:20:11

【总结·反思·汇报·思考02】裸辞后，我的一些感想和感悟。

Hello，大家好！ 首先，我需要向大家道个歉，对不起！因为最近发生了一些事情，博客文章一直没有更新。（90度鞠躬道歉） 那么，最近到底发生了什么呢？相信大家已经从…...

编程日记 2025/6/2 17:45:44

【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）

HTML代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content_lizhongyu"widthdevice-width, initial-scale1.0"><title>小兔鲜儿-新鲜、惠民、快捷<…...

编程日记 2025/6/22 1:36:21

java 导出word锁定且部分内容解锁可编辑

使用 Apache POI 创建带编辑限制的 Word 文档在日常工作中，我们可能需要生成一些带有编辑限制的 Word 文档，例如某些段落只能被查看，而其他段落可以自由编辑。本文介绍如何使用 Apache POI 创建这样的文档，并通过代码实现相应的…...

编程日记 2025/6/21 9:17:18

Scala的隐式类

package hfd //隐式类 //任务：给之前的BaseUser添加新的功能，但是不要直接去改代码 //思路：把BaseUser通过隐式转换，改成一个新类型，而这个新类型中有这新的方法 //implicit class一个隐式转换函数类 //作用&#xff1…...

编程日记 2025/5/30 18:25:22

Jenkins流水线初体验（六）

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装（三） Harbor镜像仓库介绍&安装（四） Jenkins容器使用宿主机Docker（五） Jenkins流水线初体验（六）一、Jenkins流水线任务介绍之前采用Jenkins的自由风格构建的项目，每个步骤…...

编程日记 2025/6/3 17:23:24

RK3568(二)——字符设备驱动开发

最基础的字符设备驱动开始，重点学习 Linux 下字符设备驱动开发框架。驱动框架 Linux 应用程序对驱动程序的调用： 在 Linux 中一切皆为文件，驱动加载成功以后会在“/dev”目录下生成一个相应的文件，应用程序通过对这个名为“/de…...

编程日记 2025/6/2 13:22:39

apk反编译修改教程系列-----超简单修改apk中名称包名布局文本以及其中的文字选项手机设置中apk对应修改演示【三十三】

💝💝💝在反编译apk中，每个初学者可能最感兴趣入门的就是修改包名去更新以及其中选项文本的修改。这样循序渐进来激发学习的兴趣。了解一些apk中常见的修改方法。对于修改手机rom中的系统类等等的apk原理都是一样的。这篇是应粉丝需要的修改apk基础教程. 通过博文了解…...

编程日记 2025/6/20 11:09:02

Git-分布式版本控制工具

目录 1. 概述 1. 1集中式版本控制工具 1.2分布式版本控制工具 2.Git 2.1 git 工作流程 1. 概述在开发活动中，我们经常会遇到以下几个场景：备份、代码回滚、协同开发、追溯问题代码编写人和编写时间（追责）等。备份的话是为了…...

编程日记 2025/6/4 16:00:02

计算机进制的介绍

一.进制介绍对于整数，有四种表示方式: 1）二进制:0,1，满2进1。在golang中，不能直接使用二进制来表示一个整数，它沿用了c的特点。参考:Go语言标准库文档中文版 | Go语言中文网 | Golang中文社区 | Golang中国 //赋值…...

编程日记 2025/6/3 10:17:16

【FreeMarker】实现生成Controller根据模板勾选的内容查询

需求：根据模板列表勾选的字段查询列表数据 FreeMarker代码： /*** 分页列表查询** param ${entityName?uncap_first}* param pageNo* param pageSize* param req* return*///AutoLog(value "${tableVo.ftlDescription}-分页列表查询")ApiOp…...

编程日记 2025/6/21 11:27:31

Redis 基础

一. redis 概述 Redis 是一个开源的、高性能的键值对（key-value）存储数据库，通常用作缓存、消息队列或持久化的数据存储。它的全称是 REmote DIctionary Server，最初由 Salvatore Sanfilippo 开发并于2009年发布。 redis 关键特点…...

编程日记 2025/6/21 20:04:53

【Linux】深入理解GCC/G++编译流程及库文件管理

目录 1.背景知识 2.gcc/g如何完成编译 (1) 预处理（进行宏替换） (2) 编译（生成汇编） (3) 汇编（生成机器可识别代码） (4) 链接（生成可执行文件或库文件） (5) 总结 (6) 函数库 …...

编程日记 2025/5/31 2:04:12

分布式窗口算法总结

前言相关系列《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》参考文献《【算法】令牌桶算法》固定窗口算法简介固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...

编程日记 2025/6/20 1:51:01

多分类交叉熵与稀疏分类交叉熵

总结：标签为 One-hot 编码的多分类问题，用分类交叉熵对于标签为整数的多分类问题，用稀疏分类交叉熵稀疏分类交叉熵内部会将整数标签转换为 One-hot 编码，而如果标签已经是 One-hot 编码的形式，再使用稀疏分类交叉熵就会多此一举。算例假设我们有三个类别：A、B 和 C。…...

编程日记 2025/6/2 3:05:18

ElasticSearch 简介

一、什么是 ElastcSearch？ ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引索引类似与 mysql 中的数据库，ES 中的索引是存储数据的地方，包含了一堆有相似结构的文档数据…...

编程日记 2025/6/1 19:57:39

一些浅显易懂的IP小定义

IP归属地（也叫IP地址，IP属地） 互联网协议地址，每个设备上的唯一的网络身份证明。用于确保网络数据能够精准传送到你的设备上。基于IP数据云全球IP归属地解析，示例Python代码 curl -X POST https://route.showapi.co…...

编程日记 2025/5/30 7:32:40

#渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍02-基于错误消息的SQL注入（Error-Based SQL Injection）

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/6/20 13:27:16

C# 探险之旅：第三十六节 - 类型class之密封类Sealed Classes

嗨，探险家们！欢迎再次搭乘我们的C#魔法列车，今天我们要去一个神秘又有点“傲娇”的地方——密封类（Sealed Classes）领地。系好安全带，咱们要深入“密封”的奇妙世界啦！ 什么是密封类&#xff1…...

编程日记 2025/6/19 22:11:51

Error in v-on handler: “TypeError: handler.apply is not a function“

报错截图原因原来是我在.vue单文件中 data里面的属性和methods里面的方法重名了解决方面重新命名了一下和data里面的属性值不一样就可以了。...

编程日记 2025/5/18 2:30:23

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动相关内容搜索的推荐首位，感谢大家支持。《拉…...

编程日记 2025/6/21 23:47:13

《B+树的原理与实践：探索高效数据存储与检索》

一、B树的基本原理 B树的定义 B树是一种自平衡的树结构，它是由B树衍生而来的。B树的特点是所有的数据记录都存储在叶子节点上，而叶子节点本身按照关键字的大小顺序相连，形成一个有序链表。 B树的结构 B树的结构包括以下几个部分&#xff1…...

编程日记 2025/6/3 12:52:42

Android无障碍服务监听实现自动点击按钮

原理： 通过监听窗口改变事件，监听目标应用，通过视图ID（或文本、或描述、或其他如坐标之类的）找到目标视图，使用无障碍动作点击方法点击它无障碍服务实现： 1、写一个自己的无障碍服务继承Acc…...

编程日记 2025/6/19 23:57:29

Jenkins 启动程序退出后被杀死问题

参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客...

编程日记 2025/5/19 12:58:31

前端样式练手：阴阳图+时钟的组合

开篇今天的小作品是突然脑子灵光一闪写出来的，代码不多，就不过多赘述了。代码实现 <template><div class"clock-container"><!-- <div class"bagua"><divv-for"(trigram, ind…...

编程日记 2025/5/31 16:53:08

开源分布式系统追踪-03-CNCF jaeger-02-快速开始

分布式跟踪系列 CAT cat monitor 分布式监控 CAT-是什么？ cat monitor-02-分布式监控 CAT埋点 cat monitor-03-深度剖析开源分布式监控CAT cat monitor-04-cat 服务端部署实战 cat monitor-05-cat 客户端集成实战 cat monitor-06-cat 消息存储 skywalking …...

编程日记 2025/6/22 1:30:55

医学图像分割数据集脑肿瘤分割数据集labelme格式715张1类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：715 标注数量(json文件个数)：715 标注类别数：1 标注类别名称:["tumor"] 每个类别标注的框数&#xf…...

编程日记 2025/6/21 9:25:43

2024.12.11-13——攻防世界unserialize3

知识点：PHP中的序列化和反序列化一、序列化和反序列化 1.序列化(serialize) 将对象的状态信息转换为可以存储或传输的形式的过程，简单来说，就是将状态信息保存为字符串。为了解决不同机器之间传输复杂数据类型的一种机制 2.反序列化(uns…...

编程日记 2025/6/2 10:13:37

Docker的镜像

目录 1. 镜像是什么？？2. 镜像命令详解2.1 镜像命令清单2.2 docker rmi命令2.3 docker save命令2.4 docker load命令2.5 docker history命令2.6 docker import命令2.7 docker image prune命令2.8 docker build命令 3. 镜像的操作4. 离线迁移镜像5. 镜像存…...

编程日记 2025/6/19 18:55:54