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

css3新特性第六章(2D变换)

news 来源：原创 2025/7/18 20:31:36

css3新特性第五章(2D变换)

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D位移
2D缩放
2D旋转
2D扭曲
多重变换
变换原点

一、2D位移

2D 位移可以改变元素的位置，具体使用方式如下：

先给元素添加转换属性 transform

编写 transform 的具体值，相关可选值如下：

值	含义
translateX	设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
translateY	设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。
translate	一个值代表水平方向，两个值代表：水平和垂直方向。

基本概念

图示：原点从左上角开始，为二维坐标系

在这里插入图片描述

translateX

设置水平方向偏移，值为：长度值/百分比均可

translateX(100px)

在这里插入图片描述

代码

.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;}.inner {width: 200px;height: 200px;background-color: pink;/* 向 x 轴方向移动100个像素   x 轴为 top边   y周围 left边 */transform: translateX(100px);
}<body><div class="outer"><div class="inner">2D位移</div></div>
</body>

translateY

沿着 y轴，也就是上下方向移动

translateY(100px)

在这里插入图片描述

代码

.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;}.inner {width: 200px;height: 200px;background-color: pink;/* 向 y 轴方向移动100个像素 */transform: translateY(100px);
}<body><div class="outer"><div class="inner">2D位移</div></div>
</body>

translateX/translateY同写

两个参数共同写，代表的是同事向 x、y 偏移

translateX(100px) translateY(100px)

在这里插入图片描述

代码

/* 同时向 x y 轴移动写法一 */

transform: translateX(100px) translateY(100px);

translate两个值

/* 同时向 x y 轴移动写法二 */

transform: translate(100px,100px);

/* 还支持写负值 */

/* transform: translate(-100px,-100px); */

在这里插入图片描述

写百分比

参考的是自身的宽高，然后再乘以百分比

/* 支持写百分比参考的是自生的宽高 */

transform: translate(50%,50%);

在这里插入图片描述

只写一个值

/* 如果只写一个值代表的是 x轴 */

/* transform: translate(50%); */

在这里插入图片描述

二、缩放

2D 缩放是指：让元素放大或缩小，具体使用方式如下：

1. 先给元素添加 转换属性 transform
2. 编写 transform 的具体值，相关可选值如下：

值	含义
scaleX	设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。
scaleY	设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。
scale	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。

注意点：
1. scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
2. 借助缩放，可实现小于 12px 的文字。

scaleX

沿着 x 轴缩放(宽度变化) > 1 为放大小于1位缩小

示列

在这里插入图片描述

代码

.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;font-size: 40px;text-align: center;line-height: 200px;
}.inner {width: 200px;height: 200px;background-color: pink;/*  scaleX 沿着 x 轴缩放(宽度变化)   > 1 为放大   小于1位缩小*/transform: scaleX(0.5);
}<div class="outer"><div class="inner">2D缩放</div></div>

scaleY

沿着 Y 轴缩放(高度变化) > 1 为放大小于1位缩小

示列

在这里插入图片描述

代码

transform: scaleY(0.5);

宽高同时缩放

我们可以写两个值将宽高同时进行缩放

写法1

/* 宽高同时缩放写法1 */

transform: scaleX(0.5) scaleY(0.5);

在这里插入图片描述

写法2

transform: scale(2,2);

在这里插入图片描述

写法3

可以写一个值，代表的是宽高同时为一个值的比例，如果后续我们想匡高同比例，那么写一个就可以了；

transform: scale(0.9);

在这里插入图片描述

三、旋转

2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下：

值	含义
rotate	设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。

rotateZ

旋转是 z 轴而不是 x y 轴 z轴相当于是从里到外射出来的一条线

效果

在这里插入图片描述

代码

 .inner {width: 200px;height: 200px;background-color: pink;/* 旋转是 z 轴  而不是 x  y 轴  z轴相当于是从里到外射出来的一条线*/transform: rotateZ(30deg);
}
<div class="outer"><div class="inner">2D旋转</div></div>

rotate

rotateZ(20deg) 相当于 rotate(20deg)

效果

在这里插入图片描述

代码

transform: rotate(60deg);

写负值和大于360

如果我们写负值的话，那么就是逆时针；

如果大于360度的话，就是值 - 360 后的顺时针角度

四、2D扭曲

2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方
式如下：

先给元素添加转换属性 transform

编写 transform 的具体值，相关可选值如下：

值	含义
skewX	设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skewY	设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skew	一个值代表 skewX ，两个值分别代表： skewX 、 skewY

skewX

.inner {

width: 200px;

height: 200px;

background-color: pink;

/* 水平方向 */

transform: skewX(10deg);

在这里插入图片描述

skewY

/* y 轴扭曲 */

transform: skewY(10deg);

在这里插入图片描述

skew(10deg,10deg)

/* 写法三 1个值代表的是水平方向 */

transform: skew(10deg,10deg);

在这里插入图片描述

五、多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translate(-50%, -50%) rotate(45deg);

实际上就是同时位移 + 缩放 / 旋转，多个配合使用

translate/rotate

/* 先x轴位移 100px y 轴100px 再进行旋转那么图应该是在右下角旋转 */

transform: translate(100px,100px) rotate(30deg);

在这里插入图片描述

rotate/translate

我们先进行旋转，然后再进行位移；

/* 如果我们先旋转再位移看效果，旋转是会改变坐标位置 */

transform: rotate(45deg) translate(100px,100px);

在这里插入图片描述

scale/translate

先进行缩放，然后再进行位移

/* 先缩放，再位移缩放也会改变左边位置 */

transform: scale(0.5) translate(100px,100px);

在这里插入图片描述

translate/scale

/* 先位移，再缩放 */

transform: translate(100px,100px) scale(0.5) ;

在这里插入图片描述

六、变换原点

元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
修改变换原点对位移没有影响，对旋转和缩放会产生影响。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

translate 位移

我们测试使用位移，看设置原点是否有影响

transform-origin: 50px 50px;

效果

在这里插入图片描述

代码

.inner {width: 200px;height: 200px;background-color: pink;/* 位移使用变换原点 我们发现对位移没有影响，位移原点都是相对于定点左上角来计算的 */transform-origin: 50px 50px;transform: translate(50px,50px); }

总结

我们看到使用位移的时候，设置了原点偏移没有作用，也就是说，位移对是否设置原点不影响

scale 缩放

transform-origin: 50px 50px;

transform: scale(0.5);

效果

在这里插入图片描述

总结

设置原点对缩放是有影响的，本来是以中小为原点的，目前是按照设置的方式显示

rotate 旋转

.inner {

width: 200px;

height: 200px;

background-color: pink;

transform-origin: 50px 50px;

transform: rotate(30deg);

}

效果

在这里插入图片描述

总结

设置原点对旋转是有影响的，一直围绕这设置点为中心点旋转，我们自己可以打开开发者工具，手动调整角度进行观察

几种写法

我们可以设置 transform-origin 的值为：

像素值
关键字 (left,top)
百分比
一个参数和两个参数的区别

写法一

/* 写法1 transform-origin 为一个值默认 x轴50px 第二个值默认为 50% */

transform-origin: 50px;

transform: rotate(30deg)

写法二

/* 写法2 transform-origin 为一一个关键字默认左上角 y轴为居中位置 */

transform-origin: left;

transform: rotate(30deg)

写法三

/写法3 百分比变换原点在元素中心位置百分比相对于自身/

transform: 50% 50%;

transform: rotate(30deg);

css3新特性第六章(2D变换)

css3新特性第五章(2D变换) CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 2D位移2D缩放2D旋转2D扭曲多重变换变换原点一、2D位移 2D 位移可以改变元素的位置，具体使用方式如下： 先给元素添加转换属性 transform 编写 transform 的具体值&…...

编程日记 2025/7/18 20:31:36

L2-2、示范教学与角色扮演：激发模型“模仿力“与“人格“

一、Few-shot 教学的核心原理与优势在与大语言模型交互时，Few-shot（少样本）教学是一种强大的提示技术。其核心原理是通过提供少量示例，引导模型理解我们期望的输出格式和内容风格。 Few-shot 教学的主要优势包括： …...

编程日记 2025/7/17 9:37:54

删除以下文件 /Applications/Android Studio.app /Users/用户名/Library/Application Support/Google/AndroidStudio2024.2 /Users/用户名/Library/Google/AndroidStudio /Users/用户名/Library/Preferences/com.google.android.studio.plist /Users/用户名/Library/Cache…...

编程日记 2025/7/17 14:22:33

rgw的d3n功能配置

背景最近在看缓存相关，文件系统可以通过fscache加速，加速的效果就是读取的时候能够缓存，原理是在网关的地方加入一个高速缓存盘，这样在后续读取的时候，能够直接从缓存盘读取，这样能够减少与集群的交互&am…...

编程日记 2025/7/17 21:03:18

this._uid：Vue 内部为每个组件实例分配的唯一 ID

Vue 提供了一些方法可以帮助你区分组件实例，例如通过 this._uid（Vue 内部为每个组件实例分配的唯一 ID）或自定义标识符。以下是具体的实现步骤和代码示例： console.log("当前组件实例ID:", this._uid, "时间戳:&…...

编程日记 2025/7/18 20:01:07

使用Python设置excel单元格的字体（font值）

一、前言通过使用Python的openpyxl库，来操作excel单元格，设置单元格的字体，也就是font值。把学习的过程分享给大家。大佬勿喷！ 二、程序展示 1、新建excel import openpyxl from openpyxl.styles import Font wb openpyxl.…...

编程日记 2025/7/18 20:08:18

【深度学习】#8 循环神经网络

主要参考学习资料： 《动手学深度学习》阿斯顿张等著【动手学深度学习 PyTorch版】哔哩哔哩跟李牧学AI 为了进一步提高长线学习的效率，该系列从本章开始将舍弃原始教材的代码部分，专注于理论和思维的提炼，系列名也改为“深度学习…...

编程日记 2025/6/29 10:18:28

三角形神经网络（TNN）

三角形神经网络（TNN）是一种新兴的神经网络架构，不过目前它并非像 CNN、RNN 等传统网络那样被广泛研究和应用，以下为你解释其原理并结合例子说明： 原理基本结构三角形神经网络的核心思想是构建一种类似三角形的层次…...

编程日记 2025/7/18 1:30:11

【JavaEE】-- MyBatis操作数据库（1）

文章目录 1. 什么是MyBatis2 MyBatis入门2.1 准备工作2.1.1 创建工程 2.2 配置数据库连接字符串2.3 写持久层代码2.4 单元测试 3. MyBatis的基础操作3.1 打印日志3.2 参数传递3.3 增（insert）3.3.1 返回主键 3.4 删（delete）3.5 改&…...

编程日记 2025/6/29 10:43:50

人工智能大模型备案与服务登记：监管体系的双轨逻辑与实操指南

一、核心差异：监管框架的分层设计适用范围的本质分野大模型备案：针对直接向公众提供生成式服务的自研或微调模型（如 ChatGPT 类产品），要求模型具备舆论属性或社会动员能力。典型场景包括智能客服、内容创作平台等。大…...

编程日记 2025/7/18 18:16:24

衡石ChatBI：依托开放架构构建技术驱动的差异化数据服务

在当今数字化浪潮中，企业对数据价值的挖掘和利用需求日益增长。BI（商业智能）工具作为企业获取数据洞察的关键手段，其技术架构的创新与发展至关重要。衡石科技的Chat BI凭借其独特的开放架构，在BI领域脱颖而出&#xff…...

编程日记 2025/7/6 12:13:54

AOSP Android14 Launcher3——RecentsView最近任务数据加载

最近任务是Launcher中的一个重要的功能，显示用户最近使用的应用，并可以快速切换到其中的应用；用户可以通过底部上滑停顿进入最近任务，也可以在第三方应用底部上滑进最近任务。这两种场景之前的博客也介绍过，本文就不…...

编程日记 2025/6/29 10:32:55

分析型数据库与事务型数据库？核心差异与选型指南

在当今数据驱动的业务环境中，选择合适的数据库架构已成为企业技术决策的关键。然而，面对事务型数据库和分析型数据库的选择，许多技术团队往往陷入困境：日常运行良好的系统在数据量激增时性能骤降，简单的查询在复杂分析…...

编程日记 2025/7/18 20:31:35

Linux-信号

信号是由用户，系统或者进程发送给目标进程的信息，以通知目标进程某个状态的改变或系统异常。进程分为前台进程和后台进程，对于前台进程我们可以输入特殊的终端字符来给它发送信号，比如输入Ctrlc，发送一个中断信号系…...

编程日记 2025/7/18 5:40:44

Oracle数据库学习之路-目录

Oracle数据库学习之路一、安装 （一）数据库安装步骤详解 （二）开发工具安装与配置二、基础语法篇 （一）基础 SQL 语法详解 （二）SQL 语法练习与案例分析三、高级语法篇 &…...

编程日记 2025/6/29 11:03:53

用selenium4 webdriver + java 搭建并完成第一个自动化测试脚本

自动化测试任务： 百度搜索自己的姓名。点击第一个链接（或者第二个），在新的页面上，添加断言，验证你的名字是否存在。实验资料百度网盘下载路径： 链接: https://pan.baidu.com/s/1nVlHX_ivres…...

编程日记 2025/7/18 1:30:12

晨控CK-FR12与欧姆龙NX系列PLC配置EtherNet/IP通讯连接操作手册

晨控CK-FR12系列作为晨控智能工业级别RFID读写器,支持大部分工业协议如RS232、RS485、以太网。支持工业协议Modbus RTU、Modbus TCP、Profinet、EtherNet/lP、EtherCat以及自由协议TCP/IP等。本期主题：围绕CK-FR12产品的EtherNet/IP通讯协议与欧姆龙PLC进行通讯配置…...

编程日记 2025/7/18 18:08:22

武装Burp Suite工具：RouteVulScan插件_被动扫描发现漏洞.

武装Burp Suite工具：RouteVulScan插件_被动扫描. RouteVulScan 是一款使用Java语言编写，基于Burp Suite API的插件，用于递归地检测潜在的脆弱路径。该插件通过被动扫描的方式，对路径的各个层级进行深度分析。利用预设的正则表达…...

编程日记 2025/7/18 7:32:36

Selenium+Java 环境搭建

windows电脑环境搭建Chrome浏览器 1.下载 Google Chrome 网络浏览器 （一定要下载官方的！！！） 注：最好下载在浏览器默认的路径便于查找，而且占内存不是很大 2.查看chrome浏览器的版本 3.下载…...

编程日记 2025/7/18 10:15:22

网易云IP属地可以查看城市吗？深度解析与使用指南

在互联网时代，用户的隐私和数据安全越来越受到关注。许多社交平台和应用都会显示用户的IP属地，以增加透明度和真实性。网易云音乐作为国内领先的音乐平台，也引入了IP属地显示功能。那么，网易云IP属地能否精确到城市？这…...

编程日记 2025/6/29 11:22:17

Cline 之Plan和Act模式

Cline 提供了 "Plan & Act"双模式开发框架。适用在不同的场景。一、核心模式理念通过结构化开发流程提升AI编程效率，采用"先规划后执行"的核心理念。该框架旨在帮助开发者构建更易维护、准确性更高的代码，同时显著缩短开发…...

编程日记 2025/7/16 10:43:20

【Java面试笔记：基础】7.int和Integer有什么区别？

在Java中，int和Integer虽然都用于表示整数值，但它们在本质、用法和特性上有显著差异。 1. int 和 Integer 的区别 int： 原始数据类型：int 是 Java 的 8 个原始数据类型之一，用于表示整数。性能优势：直接存…...

编程日记 2025/6/29 12:07:57

嘻游后台系统与机器人模块结构详解：功能逻辑 + 定制改造实战

作为“嘻游电玩三端组件”系列的最后一篇，本篇将全面剖析平台自带的后台控制系统与机器人行为逻辑模块，包括：用户管理、房间配置、日志系统、机器人规则编排与行为策略扩展等。通过技术视角展示其整体框架与可拓展性，帮助开发者更…...

编程日记 2025/6/29 10:35:50

Linux 网络编程：select、poll 与 epoll 深度解析 —— 从基础到高并发实战

一、IO 多路复用：解决并发 IO 的核心技术在网络编程中，当需要同时处理大量客户端连接时，传统阻塞式 IO 会导致程序卡在单个操作上，造成资源浪费。IO 多路复用技术允许单线程监听多个文件描述符（FD）&#…...

编程日记 2025/7/17 5:37:36

在统信UOS1060上安装Fail2Ban并通过邮件发送通知

在统信UOS1060上安装Fail2Ban并通过邮件发送通知 Fail2Ban 是一个开源的防止暴力攻击的软件，可以有效保护您的服务器免受频繁的登录失败攻击。本文将指导您如何在统信UOS 1060上安装Fail2Ban，并在IP被封禁后通过邮件发送通知。步骤 1：查看…...

编程日记 2025/6/29 10:33:48

PyTorch 分布式 DistributedDataParallel (DDP)

在之前的讨论（或者如果你直接跳到这里）中，我们了解了 torch.nn.DataParallel (DP) 作为 PyTorch 多 GPU 训练的入门选项。它简单易用，但其固有的主 GPU 瓶颈、GIL 限制和低效的通信模式，往往让它在实际应用中难以充分发…...

编程日记 2025/6/29 12:22:10

精益数据分析（14/126）：基于数据洞察优化产品与运营

精益数据分析（14/126）：基于数据洞察优化产品与运营在创业和数据分析的道路上，我们都在不断摸索前行。我一直希望能和大家共同学习、共同进步，所以今天继续为大家解读《精益数据分析》。这次我们将深入探讨HighScore …...

编程日记 2025/6/29 10:27:38

flutter 插件收集

编程日记 2025/6/29 10:21:46

WPF特性分析

文章目录 WPF特性全面分析与性能优化指南引言WPF核心特性1. 声明式UI与XAML2. 硬件加速渲染3. 数据绑定与MVVM4. 样式与模板5. 动画系统 WPF与其他框架比较WPF vs. WinFormsWPF vs. UWPWPF vs. MAUI WPF性能优化最佳实践1. 内存管理优化2. UI虚拟化3. 使用冻结对象4. 减少视觉树…...

编程日记 2025/7/18 19:32:23

3.1goweb框架gin下

Gin 框架有内置的模板引擎，它允许你将数据和 HTML 模板结合，动态生成网页内容。模板引擎基础使用单模板文件示例以下是一个简单的使用单个 HTML 模板文件的示例，展示了如何在 Gin 中渲染模板： package mainimport ("g…...

编程日记 2025/6/29 12:12:36

【全解析】深入理解 JavaScript JSON 数据解析

一、JSON 概述 1. 概念 JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式，这些特性使 JSON 成为理想的数…...

编程日记 2025/7/18 18:10:19

影刀RPA怎么和AI结合，制作自动采集小红书爆款文章+自动用AI改写标题、内容+用AI文生图生成发文图片+自动在小红书上发布文章

环境：影刀5.26.24 Win10专业版 doubao deepseek r1 wps 问题描述：影刀RPA怎么和AI结合，制作自动采集小红书爆款文章+自动用AI改写标题、内容+用AI文生图生成发文图片+自动在小红书上发布文章，最后上传到飞书备份解决方案： 1.主要流程如下：全局变量设置(关键…...

编程日记 2025/6/29 12:18:30

懒人一键搭建符号执行环境V5K3

0.背景在写完上一篇文章后发现，其实V5k3的组合也可以使用。Verilator v5.x 系列版本完全支持本项目的编译与仿真。不同于 v3 版本，Verilator v5 引入了更严格的访问控制机制：要从 Verilator 生成的 C 仿真模型中访问内部信号或变量&#x…...

编程日记 2025/6/29 11:46:50

Java队列（Queue）核心操作与最佳实践：深入解析与面试指南

文章目录概述一、Java队列核心实现类对比1. LinkedList2. ArrayDeque3. PriorityQueue 二、核心操作API与时间复杂度三、经典使用场景与最佳实践场景1：BFS层序遍历（树/图）场景2：滑动窗口最大值（单调队列） …...

编程日记 2025/7/18 13:20:38

Android 中实现图片翻转动画（卡片翻转效果）

1、简述通过 ObjectAnimator 和 AnimatorSet 可以实现图片的翻转动画，并在翻转过程中切换图片，同时避免图片被镜像。 ObjectAnimator 是 Android 动画框架中的一个类，用于对对象的属性进行动画效果处理。它通过改变对象的属性值来实现动画效果，非常适合实现复杂的动画，如…...

编程日记 2025/6/29 10:58:55

智能电网第1期 | 工业交换机在变电站自动化系统中的作用

随着智能电网建设的加速推进，变电站自动化系统对通信网络的实时性、可靠性和安全性提出了更高要求。在变电站智能化改造过程中，传统网络架构面临诸多挑战： 多协议兼容难题：继电保护、测控装置等设备通信协议多样，难以统…...

编程日记 2025/6/29 12:02:03

01.浏览器自动化webdriver源码分析之启动函数

日后，网络爬虫也好，数据采集也好，自动化必然是主流。因此，笔者未雨绸缪，在此研究各类自动化源码，希望能够赶上时代，做出一套实用的自动化框架。这里先研究传统的webdriver中转来进行浏览器自动…...

编程日记 2025/6/29 10:59:39

day35图像处理OpenCV

文章目录一、图像预处理17 直方图均衡化17.1绘制直方图17.2直方图均衡化1. 自适应直方图均衡化2. 对比度受限的自适应直方图均衡化3. 示例 19 模板匹配一、图像预处理 17 直方图均衡化直方图：反映图像像素分布的统计图，横坐标就是图像像素的取值&…...

编程日记 2025/7/18 18:08:22

精益数据分析（15/126）：解锁数据分析关键方法，驱动业务增长

精益数据分析（15/126）：解锁数据分析关键方法，驱动业务增长在创业与数据分析的征程中，我们都在努力探寻成功的密码。今天，我依旧带着和大家共同进步的初衷，深入解读《精益数据分析》的相关内容…...

编程日记 2025/6/29 11:21:17

JETBRAINS USER AGREEMENT【2025.4.16】更新用户许可协议

JETBRAIN旗下的各产品更新用户许可协议： 大致跟漂亮国出口管制政策有关，以下是详细内容： JETBRAINS USER AGREEMENT Version 2.0, effective as of April 16, 2025 THIS IS A LEGAL AGREEMENT. BY CLICKING ON THE "I AGREE" (OR…...

编程日记 2025/6/29 12:13:04

【数字图像处理】立体视觉基础（1）

成像成像过程：三维空间坐标到二维图像坐标的变换相机矩阵：建立三维到二维的投影关系相机的使用步骤（模型-视图变换）： （1）视图变换 （2）模型变换 （3&…...

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

通过AI工具或模型创建PPT的不同方式详解，结合 Assistants API、DALL·E 3 等工具的功能对比及表格总结

以下是通过AI工具或模型创建PPT的不同方式详解，结合 Assistants API、DALLE 3 等工具的功能对比及表格总结： 1. 主要实现方式详解 1.1 基于文本生成PPT 工具示例：Microsoft PowerPoint Copilot、Google Workspace（AI-powered D…...

编程日记 2025/7/17 4:54:22

weibo_har鸿蒙微博分享，单例二次封装，鸿蒙微博，微博登录

weibo_har鸿蒙微博分享，单例二次封装，鸿蒙微博 HarmonyOS 5.0.3 Beta2 SDK，原样包含OpenHarmony SDK Ohos_sdk_public 5.0.3.131 (API Version 15 Beta2) 🏆简介 zyl/weibo_har是微博封装使用，支持原生core使用 &a…...

编程日记 2025/6/29 11:48:16

C++ Lambda表达式复习

C Lambda表达式 (C Lambda Expressions: Beginner to Advanced) Lambda表达式是C11引入的一种轻量级匿名函数语法，支持闭包捕获，可以简化代码逻辑，特别是在函数式编程、回调函数和STL算法场景中尤为常用。本文将从基础语法到高级应用&#x…...

编程日记 2025/6/29 11:00:59

鸿蒙NEXT开发权限工具类（申请授权相关）（ArkTs）

import abilityAccessCtrl, { Permissions } from ohos.abilityAccessCtrl; import { bundleManager, common, PermissionRequestResult } from kit.AbilityKit; import { BusinessError } from ohos.base; import { ToastUtil } from ./ToastUtil;/*** 权限工具类（…...

编程日记 2025/7/18 17:51:52

1000 QPS 下 MySQL 性能瓶颈解决方案

当 MySQL 在 1000 QPS 时出现性能瓶颈，需从‌索引优化‌、‌查询逻辑调整‌、‌服务器配置调优‌、‌架构扩展‌等多维度综合解决，具体策略如下： 一、索引优化补充缺失索引‌ 通过慢查询日志定位高频低效 SQL，使用 EXPLAIN 分…...

编程日记 2025/7/18 16:25:23

【MySQL】MySQL 表的增删改查（CRUD）—— 下篇（内含聚合查询、group by和having子句、联合查询、插入查询结果）

目录 1. 插入查询结果 2 聚合查询 （行与行之间运算） count 计算查询结果的行数 sum 求和 avg 求平均值 max 最大值 min 最小值【小结】 3. group by 子句分组 where 条件 having 条件 4. 联合查询（多表查询） 内连接…...

编程日记 2025/7/18 4:51:21

简化K8S部署流程：通过Apisix实现蓝绿发布策略详解（上）

本次主题主要目的是为大家讲解蓝绿发布，但是发现文档和内容太长了，对此将文档拆分成了两部分，视频拆分成了好几部分，这样大家刷起来没疲劳感。第一部分《apisix argorollout 实现蓝绿发布I-使用apisix发布应用》，主要…...

编程日记 2025/7/18 20:00:54

FLV 与 MP4 格式深度剖析：结构、原理

1 FLV格式分析 1.1 定义 FLV(Flash Video)是Adobe公司推出的⼀种流媒体格式，由于其封装后的⾳视频⽂件体积⼩、封装简单等特点，⾮常适合于互联⽹上使⽤。⽬前主流的视频⽹站基本都⽀持FLV。采⽤FLV格式封装的⽂件后缀为.flv FLV封装格式是由⼀个**⽂件…...

编程日记 2025/7/2 22:23:20

k8s的yaml文件里的volume跟volumeMount的区别

volume 是 Pod 级别的资源，用于定义存储卷。它是一个独立于容器的存储资源，可以被一个或多个容器共享使用。volume 的定义位于 Pod 的 spec.volumes 部分。特点独立性：volume 是 Pod 的一部分，而不是容器的一部分。它独立于容…...

编程日记 2025/7/16 15:26:20

css3新特性第五章(2D变换)

一、2D位移

基本概念

translateX

translateX(100px)

代码

translateY

translateY(100px)

代码

translateX/translateY同写

translateX(100px) translateY(100px)

代码

translate两个值

写百分比

只写一个值

二、缩放

scaleX

示列

代码

scaleY

示列

代码

宽高同时缩放

写法1

写法2

写法3

三、旋转

rotateZ

效果

代码

rotate

效果

代码

写负值和大于360

四、2D扭曲

skewX

skewY

skew(10deg,10deg)

五、多重变换

translate/rotate

rotate/translate

scale/translate

六、变换原点

translate 位移

效果

代码

总结

scale 缩放

效果

总结

rotate 旋转

效果

总结

几种写法

写法一

写法二

写法三

相关文章：