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

css3新特性第七章(3D变换)

news 来源：原创 2025/7/5 4:36:47

css新特性第七章(3D变换)

一、3d空间和景深

元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！

使用 transform-style 开启 3D 空间，可选值如下：

flat ：让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
preserve-3d ：让子元素位于此元素的三维空间内（ 3D 空间）

景深

何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立
体。

perspective
- none ：不指定透视 ——（默认值）
- 长度值：指定观察者距离 z=0 平面的距离，不允许负值。
perspective 设置给发生 3D 变换元素的父元素！

基础html结构

  .outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 150px;}<div class="outer"><div class="inner">3D变换</div></div>

设置 rotateX 旋转效果

在这里插入图片描述

代码

.inner {

width: 200px;

height: 200px;

background-color: palegreen;

/* 设置x轴旋转类似于体操运动员，一直在单杠上面上下 */

transform: rotateX(50deg);

}

设置rotateY 旋转效果

在这里插入图片描述

代码

.inner {

width: 200px;

height: 200px;

background-color: palegreen;

/* 设置Y轴旋转类似于旋转，沿着柱子左右方向 */

transform: rotateY(50deg);

}

总结

我们发现，当我们设置了 perspective 的参数大小会发现，我们数值设置的越小，那么我们看到的z轴面积就越大，改值跟我们眼睛看东西一样，越近对应看到的物体也就越大，数字越小就代表越近，因为只有旋转效果是最好的，位移和缩放是看不出来的，因为没有厚度

二、透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。通常我们不需要跳转透视点位置；

perspective-origin
400px 300px 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）

默认效果

在这里插入图片描述

代码

 <style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 *//* perspective-origin: 102px 102px; *//* 透视点位置  x 轴代表是右下角   y代表底下蹲下来看 *//* perspective-origin: 400px 300px; */}.inner {width: 200px;height: 200px;background-color: rgb(60, 209, 209,0.7);/* 设置x轴旋转    */transform: rotateX(50deg);/* 设置Y轴旋转    类似于旋转，沿着柱子左右方向 *//* transform: rotateY(50deg); */}</style>
</head>
<body><div class="outer"><div class="inner">3D透视</div></div>
</body>

设置透视点位置

perspective-origin: 400px 300px; 透视点位置 x 轴代表是右下角 y代表底下蹲下来看

rotateX 效果

.inner {

width: 200px;

height: 200px;

background-color: rgb(60, 209, 209,0.7);

/* 设置x轴旋转 */

transform: rotateX(50deg);

}

在这里插入图片描述

rotateY 效果

transform: rotateY(50deg);

在这里插入图片描述

三、3D位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：

先给元素添加转换属性 transform

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

值	含义
translateZ	设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
translate3d	第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均不能省略。

html基本结构

  .outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 259px 226px;}<div class="outer"><div class="inner">3D位移</div></div>

写法1：translateZ

.inner {

width: 200px;

height: 200px;

background-color: rgba(87, 62, 230, 0.8);

/* 写法1 z 轴我们可以看到是放大了实际上是从里面出来*/

transform: translateZ(150px);

/* 增加阴影 */

box-shadow: 0px 0px 10px black;

}

在这里插入图片描述

写法2：transform

x 轴 y 轴 z轴三个参数都不能省

transform: translate3d(100px,100px,100px);

在这里插入图片描述

总结

我们看到的第一眼以为是一个放大，实际上不是的，位移后，原本盒子没有厚度导致我们以为只是放大，这个时候我们需要调整透视点位置即可

四、3D选择

旋转是这些效果中最明显的。

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：

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

值	含义
rotateX	设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负值逆时针。
rotateY	设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负值逆时针。
rotate3d	前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度。

rotateX

沿着x轴开启3d空间

效果

在这里插入图片描述

代码

  .outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgb(167, 248, 44,0.9);/* x 轴 顺时针 *//* transform: rotateX(45deg) *//* y 轴 顺时针 *//* transform: rotateY(45deg); *//* 写法3  写的是4个值  x y z  旋转角度   */transform: rotate3d(1,0,1,30deg);}
<div class="outer"><div class="inner">3D旋转</div></div>

rotateY

沿着y轴进行旋转

效果

在这里插入图片描述

代码

 /* y 轴 顺时针 */transform: rotateY(45deg);

rotate3d

复合属性写法写的是4个值 x y z 旋转角度

transform: rotate3d(1,0,1,50deg);

在这里插入图片描述

五、3D缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：

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

值	含义
scaleZ	设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。
scale3d	第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许省略。

代码结构

<style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgb(167, 248, 144,0.9);/* 写法1  scaleZ我们看到好像没有效果，我们调转旋转角度看  如果真的有厚度，到90度那么就可以看得到 */transform: scaleZ(4) rotateY(45deg);/* 写法2  最后一个参数是景深除以 最后一个参数，代表的就是离得近了*/transform: scale3d(1.5,1.5,4) rotateY(45deg);}</style>
</head>
<body><div class="outer"><div class="inner">3D缩放</div></div>

scaleZ

scaleZ我们看到好像没有效果,这个时候我们调整一下角度再看效果

transform: scaleZ(4) rotateY(45deg);

在这里插入图片描述

scale3d

最后一个参数是景深除以最后一个参数，代表的就是离得近了

transform: scale3d(1.5,1.5,4) rotateY(45deg);

在这里插入图片描述

六、多重变换

我们同时使用多个属性同时实现变换，多重变换时，建议最后旋转。

方式1

transform-origin: left;

transform: rotateY(45deg);

在这里插入图片描述

方式2

y 轴线右边需要计算宽度

transform-origin: 200px 0px;

transform: rotateY(45deg);

在这里插入图片描述

方式3

/* 方式3 x 轴线上方 */

transform-origin: 0px 0px;

transform: rotateX(45deg);

在这里插入图片描述

方式4

/* 方式4 x 轴线下方需要计算宽和高度 */

transform-origin: 202px 202px;

transform: rotateX(45deg);

在这里插入图片描述

方式5

位移放大旋转一起使用旋转放到最后

/* 位移放大旋转一起使用旋转放到最后 */

transform: translateZ(100PX) scaleZ(1.5) rotateY(45deg);

在这里插入图片描述

七、背部可见性

使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：

visible ：指定元素背面可见，允许显示正面的镜像。—— 默认值
hidden ：指定元素背面不可见

** backface-visibility 需要加在发生 3D 变换元素的自身上。**

效果

在这里插入图片描述

代码

<style>.outer {width: 200px;height: 200px;border: 2px solid black;font-size: 30px;text-align: center;line-height: 200px;margin: 0 auto;margin-top: 100px;/* 父元素需要开启3d空间 */transform-style: preserve-3d;/* 设置景深   近大远小  必须要设置在父元素上面 */perspective: 500px;/* 修改透视点位置 默认是正中央 */perspective-origin: 102px 102px;}.inner {width: 200px;height: 200px;background-color: rgba(240, 35, 161, 0.9);/* 越过90度，背后不能看到 */backface-visibility: hidden;/* 旋转y轴 */transform: rotateY(40deg);}</style>
</head>
<body><div class="outer"><div class="inner">3D背部可见性</div></div>

css3新特性第七章(3D变换)

css新特性第七章(3D变换) 一、3d空间和景深元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！ 使用 transform-style 开启 3D 空间，可选值如下： flat ： 让子元素位于此元素的二维平面内（ 2D 空间&…...

编程日记 2025/7/5 4:36:47

redis经典问题

1.缓存雪崩指缓存同一时间大面积的失效，所以，后面的请求都会落到数据库上，造成数据库短时间内承受大量请求而崩掉。解决方案： 1）Redis 高可用，主从哨兵，Redis cluster，避免全盘崩…...

编程日记 2025/6/29 11:56:25

数据仓库是什么？数据仓库架构有哪些？

目录数据仓库是什么？数据仓库架构有哪些？ 一、数据仓库是什么？ 二、数据仓库的架构分层 1. 获取层 2. 数据层 3. 应用层 4. 访问层三、数据仓库的价值体现 1.决策支持 2.业务优化 3.提升竞争力四、数据仓库的未来发展趋势总…...

编程日记 2025/7/5 3:27:58

Nginx 通过 Let‘s Encrypt 实现 HTTPS 访问全流程指南

一、Let’s Encrypt 与 Certbot 简介 Let’s Encrypt 是由非营利组织 ISRG 运营的免费证书颁发机构（CA），旨在推动 HTTPS 的普及。其核心工具 Certbot 能自动化完成证书申请、部署与续期，大幅降低 HTTPS 的配置复杂度。通过 Certb…...

编程日记 2025/7/5 3:51:55

网络知识：路由器静态路由与动态路由介绍

目录一、静态路由 1.1 什么是静态路由？ 1.2 静态路由的好处 1.3 静态路由的局限 1.4 静态路由应用场景微型办公室网络性能要求高业务流量安全性要求高的环境二、动态路由 2.1 什么是动态路由？ 2.2 动态路由的好处 2.3 动态路由的局限 2.4 动态路由的应用场…...

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

LLaMA3微调全流程：从LoRA到QLoRA，7B参数模型推理速度提升4倍的代码实战

LLaMA3微调全流程：从LoRA到QLoRA，7B参数模型推理速度提升4倍的代码实战发现了一个巨牛的人工智能学习网站，分享一下给大家！https://www.captainbed.cn/ccc 前言在大模型时代，LLaMA系列作为开源社区的明星模型&#…...

编程日记 2025/6/29 9:47:45

日内组合策略思路

一、策略概述本策略是一种针对日内交易设计的策略，其核心在于通过识别市场趋势和突破信号，结合动态止损和止盈机制，实现日内交易的盈利。策略以金字塔式的加仓方式控制风险，并通过灵活的平仓策略锁定收益。二、交易逻辑思路市场…...

编程日记 2025/6/29 9:23:16

从空气污染监测到嵌入式仿真教学：基于STM32与MQ135的实践探索

一、嵌入式系统在环境监测中的技术演进随着全球城市化进程加速，世界卫生组织（WHO）数据显示，92%的人口长期暴露于超标PM2.5环境中。在此背景下，基于STM32微控制器的智能监测系统因其高性价比（单节点成本低…...

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

【数据结构】Map与Set结构详解

数据结构系列五：Map与Set(一) 一、接口的实现 1.方法上 2.成员上二、Map的内外双接口结构 1.实现 1.1外部Map接口的实现 1.1.1临摹整体 1.1.2外部类实现整体 1.2内部Entry接口的实现 1.2.1临摹内部 1.2.2内部类实现内部 2.关系 3.意义 3.1逻辑内聚 …...

编程日记 2025/6/29 10:20:37

银河麒麟(内核CentOS8)安装rbenv、ruby2.6.5和rails5.2.6

一、安装 rbenv 和 ruby-build 1.安装 rbenv git clone https://github.com/rbenv/rbenv.git ~/.rbenv 2. 添加 rbenv 到 PATH echo export PATH"$HOME/.rbenv/bin:$PATH" >> ~/.bashrc echo eval "$(rbenv init -)" >> ~/.bashrc source ~…...

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

豆包桌面版 1.47.4 可做浏览器，免安装绿色版

自己动手升级更新办法： 下载新版本后安装，把 C:\Users\用户名\AppData\Local\Doubao\Application 文件夹的文件，拷贝替换 DoubaoPortable\App\Doubao 文件夹的文件，就升级成功了。再把安装的豆包彻底卸载就可以。桌面版比网页版…...

编程日记 2025/6/29 11:26:41

Linux 命令行与 vi/vim 编辑器完全指南

一、Linux 命令行基础 （一）命令与命令行简介命令：Linux 系统内置的操作指令，以字符化形式使用，用于指示系统执行特定任务。命令行（终端）：提供字符化的操作界面，用户通…...

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

海量聊天消息处理：ShardingJDBC分库分表、ClickHouse冷热数据分离、ES复合查询方案、Flink实时计算与SpringCloud集成

海量聊天消息处理：ShardingJDBC分库分表、ClickHouse冷热数据分离、ES复合查询方案、Flink实时计算与SpringCloud集成一、背景介绍每天有2000万条聊天消息，一年下来几千万亿海量数据。为应对这种规模的数据存储和处理需求，本文将从以下几…...

编程日记 2025/6/29 11:29:04

金融系统上云之路：云原生后端架构在金融行业的演化与实践

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：为什么金融行业也要“云原生”？金融行业素来以“安全第一、稳定优先”著称，面对每日亿级交易请求、秒级风控响应、PB级数据处理，系统稳定性和性能要求极高。长期以来，大型金融机构往…...

编程日记 2025/6/29 10:02:36

每日c/c++题备战蓝桥杯（[洛谷 P1226] 快速幂求模题解）

[洛谷 P1226] 快速幂求模题解 📌 题目链接 https://www.luogu.com.cn/problem/P1226 📝 题目描述给定正整数 a、b 和质数 p，要求计算： a^b % p其中： 1 ≤ a ≤ 10^90 ≤ b ≤ 10^92 ≤ p ≤ 10^9 &#x1f4a1…...

编程日记 2025/6/29 9:22:45

深度学习小记(包括pytorch 还有一些神经网络架构)

这个是用来增加深度学习的知识面或者就是记录一些常用的命令,会不断的更新 import torchvision.transforms as transforms toPIL transforms.ToPILImage()#可以把tensor转换为Image类型的 imgtoPIL(img) #利用save就可以保存下来 img.save("/opt/data/private/stable_si…...

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

Spring Boot默认缓存管理

Spring框架支持透明地向应用程序添加缓存，以及对缓存进行管理，其管理缓存的核心是将缓存应用于操作数据的方法，从而减少操作数据的执行次数，同时不会对程序本身造成任何干扰。Spring Boot继承了Spring框架的缓存管理功能&#xff…...

编程日记 2025/6/29 11:24:47

倚光科技：微透镜阵列低成本加工新范式

在光通信、机器视觉、生物医学成像等前沿领域，微透镜阵列凭借其独特的光学特性成为不可或缺的核心部件。然而，传统加工方式往往面临成本高、效率低、精度难控等困境。倚光科技深耕光学加工领域多年，创新运用单点金刚石车床技术，成…...

编程日记 2025/6/29 9:23:06

Vue+Flask豆瓣LSTM影评+推荐算法大数据可视化平台深度学习系统源码

文章结尾部分有CSDN官方提供的学长联系方式名片文章结尾部分有CSDN官方提供的学长联系方式名片关注B站，有好处！ 编号： F011 视频介绍 VueFlask豆瓣LSTM影评推荐算法大数据可视化平台深度学习系统源码（2023重制） 1…...

编程日记 2025/6/29 11:06:19

【MySQL】基本查询

目录增加查询基本查询 where子句结果排序筛选分页结果修改(更新) 删除普通删除截断表插入查询结果聚合函数分组查询这一节的内容是对表内容的增删查改，其中重点是表的查询增加语法： INSERT [INTO] table_name [(column [, …...

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

hive默认的建表格式

在 Hive 中创建表时，默认的建表语法格式如下： CREATE TABLE table_name (column1_type,column2_type,... ) ROW FORMAT DELIMITED FIELDS TERMINATED BY , STORED AS TEXTFILE;在这个语法中： CREATE TABLE table_name：指定要创建…...

编程日记 2025/6/29 12:00:58

配置RSUniVLM环境（自用）

首先git clone这个仓库，但是好像不太行，就直接下载下来吧创个容器弄，容器里需要conda gpu 镜像的话在dockerhub找到了一个：docker pull vkashyap10/llava-next 下载在了 ssh root10.12.107.240 amos123 这个机器上。等会看…...

编程日记 2025/6/29 12:26:08

产品经理对于电商接口的梳理||电商接口文档梳理与接入

接口梳理7个注意点总结 ①注意要测试环境和生产环境。生产上线时候要提醒研发换到生产环境调用。 ②注意必输字段和选输字段，要传入字段的含义和校验。枚举值不清楚含义的要询问对方含义，比如说单据类型字段枚举值是B2C发货单，BBC发货单&am…...

编程日记 2025/6/29 9:23:43

深入探索Spark-Streaming：从Kafka数据源创建DStream

在大数据处理领域，Spark-Streaming是一个强大的实时流处理框架，而Kafka作为高性能的分布式消息队列，二者结合能实现高效的数据处理。今天就来聊聊Spark-Streaming中从Kafka数据源创建DStream的相关知识。早期，Spark-Streaming通过…...

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

R 语言科研绘图第 41 期 --- 桑基图-基础

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

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

基于STM32的汽车主门电动窗开关系统设计方案

芯片和功能模块选型主控芯片 STM32F103C8T6：基于 ARM Cortex - M3 内核，有丰富的 GPIO 接口用于连接各类外设，具备 ADC 模块可用于电流检测，还有 CAN 控制器方便实现 CAN 总线通信。它资源丰富、成本低，适合学生进行 DIY 项目开发。按键模块轻触按键：用于控制车窗的自…...

编程日记 2025/6/29 10:07:15

Spring Boot 配置处理器深度解析：元数据驱动的工程实践

Spring Boot 配置处理器深度解析：元数据驱动的工程实践引言：为什么关注配置处理器？ 在 Spring Boot 中，spring-boot-configuration-processor 是支撑“配置即文档”“配置即代码”的基础设施。它通过编译期生成结构化的配置元数…...

编程日记 2025/6/29 11:12:47

深入详解人工智能数学基础——概率论中的贝叶斯深度学习

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...

编程日记 2025/6/29 9:22:49

Bandizip解压缩软件 v7.37 正式版解锁专业版

软件介绍 Bandizip 是一款专业的解压缩软件，号称解压速度最快的压缩和解压缩文件管理器。支持多核快速压缩、文件拖放，可创建带密码和多卷的压缩包，提取包括RAR/RAR5/7Z/ZIP在内30多种格式；支持WinZip、7-Zip和WinRAR及其它压缩格…...

编程日记 2025/6/29 10:54:41

算法笔记.spfa算法(bellman-ford算法的改进)

题目：（来源于AcWing） 给定一个 n 个点 m 条边的有向图，图中可能存在重边和自环， 边权可能为负数。请你求出 1 号点到 n 号点的最短距离，如果无法从 1 号点走到 n 号点，则输出 impossible。 …...

编程日记 2025/6/29 10:23:13

HTML给图片居中

在不同的布局场景下，让 <img> 元素居中的方法有所不同。下面为你介绍几种常见的居中方式 1. 块级元素下的水平居中如果 <img> 元素是块级元素（可以通过 display: block 设置），可以使用 margin: 0 auto 来实现水平居…...

编程日记 2025/6/29 9:52:54

C#中用 OxyPlot 在 WinForms 实现波形图可视化（附源码教程）

今天给大家安利一个超级实用的绘图控件库——OxyPlot，配合WinForms使用，让你轻松绘制专业级图表！ 本文将手把手教你如何搭建一个简单的波形图显示窗口，完整步骤源码解析，建议收藏！ 项目搭建步骤&#xf…...

编程日记 2025/6/29 12:21:53

arm-linux emmc镜像备份和 rootfs镜像备份

介绍对于系统镜像存储介质，我们更推荐使用eMMC， eMMC具有更快的读写速度和更高的稳定系，而SD卡会有兼容性较差的问题，使用部分品牌部分系列的SD卡会导致系统无法启动或运行异常。另外，安卓系统镜像无法运行在SD卡上。注意事项使用野火LubanCat的镜像烧录到SD卡，只…...

编程日记 2025/6/29 11:13:35

opencv--图像变换

图像变换图像滤波用于处理像素(去噪)，从而改变图像质量。图像的几何变换是指改变图像的几何位置、几何形状、几何尺寸等几何特征。 <详细了解，看opencv书> 概念矩阵的运算链接齐次坐标链接齐次坐标就是用N1维来代表N维坐标&#xff…...

编程日记 2025/7/2 9:40:04

C语言基础（day0424）

目录一. 键盘输入 1.1 grtchar（） 1.2 scanf（） 总结: 二. 全局变量/局部变量（函数的分类） 1.全局变量 2.局部变量三.C语言内存模型（堆栈内存and so on ） 3.1 栈区&#x…...

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

前端项目搭建集锦：vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展，开箱即用，附带项目搭建教程

前端项目搭建集锦：vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展，开箱即用，附带项目搭建教程前言：一、Vue项目下载快速通道二、React项目下载快速通道三、BrowserPlugins项目下载快速通道四、项目搭建教…...

编程日记 2025/7/2 18:35:24

Next.js v15 eslint 规则配置

问题 An empty interface declaration allows any non-nullish value, including literals like 0 and "". If that’s what you want, disable this lint rule with an inline comment or configure the ‘allowInterfaces’ rule option.If you want a type meanin…...

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

【C语言经典算法实战】：从“移动距离”问题看矩阵坐标计算

🎁个人主页：User_芊芊君子 🎉欢迎大家点赞👍评论📝收藏⭐文章 🔍系列专栏：AI 【前言】在C语言算法学习与实践领域中，矩阵相关问题是极具代表性且高频出现的题型。“移动距离”问题将…...

编程日记 2025/6/29 12:17:55

算法题（133）：二维差分

审题： 本题需要我们多次对某个矩形区域的数据加k，最后输出加完的数据思路： 方法一：二维差分本题涉及的是对二维的区间加同一个数的操作，且只显示一次最终结果，所以我们可以使用差分的方法二维差分的性质…...

编程日记 2025/6/29 12:31:00

java kafka

安装安装下载导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apach…...

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

数据结构【树和二叉树】

树和二叉树前言1.树1.1树的概念和结构1.2树的相关术语1.3树的表示方法1.4 树形结构实际运用场景 2.二叉树2.1二叉树的概念和结构2.2二叉树具备以下特点：2.3二叉树分类 3.满二叉树4.完全二叉树5.二叉树性质6.附：树和二叉树图示前言欢迎莅临姜行运主页…...

编程日记 2025/6/29 10:40:05

.NET代码保护混淆和软件许可系统——Eziriz .NET Reactor 7

.NET代码保护混淆和软件许可系统——Eziriz .NET Reactor 7 1、简介2、功能特点3、知识产权保护功能4、强大的许可系统5、软件开发工具包6、部署方式7、下载 1、简介 .NET Reactor是用于为.NET Framework编写的软件的功能强大的代码保护和软件许可系统，并且支持生成…...

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

运维打铁：Centos 7使用yum安装 Redis 5

文章目录一、安装前信息说明二、安装 Redis三、创建 Redis 相关数据目录四、启动 Redis 服务五、修改 Redis 数据目录和端口1. 修改 Redis 配置文件 /etc/redis.conf2. 拷贝数据到数据目录并授权3. 重启 Redis 并连接访问六、常见问题及解决办法1. Redis 安装失败2. Redis 服…...

编程日记 2025/6/29 11:54:51

【蓝桥杯】可分解的正整数

可分解的正整数定义一种特殊的整数序列，这种序列由连续递增的整数组成，并满足以下条件： 序列长度至少为 3。序列中的数字是连续递增的整数（即相邻元素之差为 1），可以包括正整数、负整数或 0。例如&…...

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

长城杯铁人三项初赛-REVERSE复现

前言记录记录 1.LoginToMe int __fastcall main(int argc, const char **argv, const char **envp) {unsigned int v3; // eaxchar s[96]; // [rsp10h] [rbp-70h] BYREFint v6; // [rsp70h] [rbp-10h]int v7; // [rsp78h] [rbp-8h]int i; // [rsp7Ch] [rbp-4h]memset(s, 0, s…...

编程日记 2025/7/5 2:45:04

css新特性第七章(3D变换)

一、3d空间和景深

景深

基础html结构

设置 rotateX 旋转效果

代码

设置rotateY 旋转效果

代码

总结

二、透视点位置

默认效果

代码

设置透视点位置

rotateX 效果

rotateY 效果

三、3D位移

html基本结构

写法1：translateZ

写法2：transform

总结

四、3D选择

rotateX

效果

代码

rotateY

效果

代码

rotate3d

五、3D缩放

代码结构

scaleZ

scale3d

六、多重变换

方式1

方式2

方式3

方式4

方式5

七、背部可见性

效果

代码

相关文章：