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

CSS之3D转换

news 来源：原创 2025/7/18 17:24:33

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴:水平向右注意:x右边是正值，左边是负值

y轴:垂直向下注意:y下面是正值，上面是负值

z轴:垂直屏幕注意:往外面是正值，往里面是负值

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向,

translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ-般用px单位)

transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离（xyz是不能省略的，如果没有就写）

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。模拟人类的视觉位置，可认为安排一只眼睛去看

透视我们也称为视距:视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素

透视写在被观察元素的父盒子上面的

d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴，物体距离屏幕的距离，z轴越大(正值 )我们看到的物体就越大

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转语法

transform:rotateX(45deg):沿着x轴正方向旋转 45度

transform:rotateY(45deg):沿着y轴正方向旋转 45deg

transform:rotateZ(45deg):沿着Z轴正方向旋转 45deg

transform:rotate3d(xy,z,deg):沿着自定义轴旋转 deg为角度(了解即可)

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转 deg为角度(了解即可)xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。

transform-style:flat子元素不开启3d立体空间默认的

transform-style:pfeserve-3d;子元素开启立体空间

代码写给父级，但是影响的是子盒子

案例一：

<!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>body {perspective: 500px;}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s;transform-style: preserve-3d;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box:hover {transform: rotateY(60deg);}.box div:last-child {background-color: purple;transform: rotateX(60deg);}</style>
</head><body><div class="box"><div></div><div></div></div>
</body></html>

案例二：两面盒子翻转

<!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>body {perspective: 400px;}.box {position: relative;width: 100px;height: 100px;margin: 100px auto;transition: all .4s;transform-style: preserve-3d;}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;line-height: 100px;font-size: 20px;color: #fff;backface-visibility: hidden;}.front {background-color: pink;z-index: 1;}.back {background-color: purple;transform: rotateY(180deg);}.box:hover {transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">正面</div><div class="back">反面</div></div>
</body></html>

案例三：3D导航栏

<!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>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;width: 120px;height: 35px;list-style: none;perspective: 500px;margin: 10px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .3s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 35px;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;transform: translateY(17.5px) rotateX(-90deg);}</style>
</head><body><ul><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li><li><div class="box"><div class="front">导航</div><div class="bottom">选项</div></div></li></ul>
</body></html>

案例四：旋转木马

<!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>body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 150px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;background: url(images/dog.jpg);}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(images/dog.jpg) no-repeat;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}</style>
</head><body><section><div>1</div><div>2</div><div>3</div><div></div><div></div><div></div></section>
</body></html>

CSS之3D转换

三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴:水平向右注意:x右边是正值，左边是负值 y轴:垂直向下注意:y下面是正值，上面是负值 z轴:垂直屏幕注意:往外面是正值，往里面是负值 3D移动 translat…...

编程日记 2025/7/18 17:24:33

uni-app初学笔记：文件路径与作用

components:可复用的组件pages:页面（可见/不可见）static:静态资源，存放图片视频等 （相当于vue项目的 assets）mainjs:Vue初始化入口文件App.vue:应用配置，用来配置App全局样式以及监听pages.json :配置页面路…...

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

子组件中$emit和update更新传递变量

vue2.6之后才可以使用update更新，vue2.6以下版本使用input和v-model 需求描述：蒙层上展示弹窗，弹窗点击关闭，需要向父传递关闭的信息方法1，简便直接传递变量visible（或者不改名isModalVisible也是可以的…...

编程日记 2025/7/17 20:41:55

浅谈Python库之lxml

一、基本介绍 lxml 是一个用 Python 编写的库，它提供了对 XML 和 HTML 文档的解析和操作功能。它使用 C 语言编写的 libxml2 和 libxslt 库作为后端，因此解析速度非常快，并且能够处理大型文档。lxml 支持 XPath 和 XSLT，这使得它在…...

编程日记 2025/7/18 17:23:35

spring boot框架漏洞复现

spring - java开源框架有五种 Spring MVC、SpringBoot、SpringFramework、SpringSecurity、SpringCloud spring boot版本版本1：直接就在根下 / 版本2：根下的必须目录 /actuator/ 端口：9093 spring boot搭建 1：直接下载源码打包 2：运行编译好的jar包：actuator-testb…...

编程日记 2025/7/18 17:12:39

IDEA插件CamelCase,快速转变命名格式

在IDEA上大小写转换的快捷键是 CtrlshitU 其它的格式转换的快捷键是 shitaltu 安装方法： file-settings-plugins-在marketplace搜索“CamelCase”-点击安装。安装成功设置后，重新打开idea 下载完成后点击 Apply 和OK 此刻就可以选中命名并使用快捷…...

编程日记 2025/7/18 16:36:13

Elasticsearch中的节点（比如共20个），其中的10个选了一个master，另外10个选了另一个master，怎么办？

大家好，我是锋哥。今天分享关于【Elasticsearch中的节点（比如共20个），其中的10个选了一个master，另外10个选了另一个master，怎么办？】面试题。希望对大家有帮助； Elasticsearch中的节…...

编程日记 2025/7/18 17:01:53

Spring Boot 集成 Knife4j 的 Swagger 文档

在开发微服务应用时，API 文档的生成和维护是非常重要的一环。Swagger 是一个非常流行的 API 文档工具，可以帮助我们自动生成 RESTful API 的文档，并提供了一个友好的界面供开发者测试 API。本文将介绍如何在 Spring Boot 项目中集成 Knife4j …...

编程日记 2025/7/18 16:31:08

C# 创建快捷方式文件和硬链接文件

C# 创建快捷方式文件和硬链接文件引言什么是快捷方式什么是硬链接文件硬链接与快捷方式不同实现创建快捷方式文件实现创建硬链接文件小结引言什么是快捷方式平常我们最常window桌面上点击的左下角带小箭头的文件就是快捷方式了，大家都很熟悉它。快捷方式是Wi…...

编程日记 2025/7/18 17:10:23

Linux高阶——1123—服务器基础服务器设备服务器基础能力

目录 1、服务器基础 1、服务器基本概述 2、服务器设计之初解决的问题网络穿透网络数据设备间的收发 3、服务器的类型C/S、B/S 2、服务器设备将自己的服务器软件部署上线 3、代理服务器负载均衡，以及地址绑定方式 4、服务器的基础能力 1、服务器基础 1…...

编程日记 2025/7/18 16:41:06

LabVIEW串口通讯速度

LabVIEW串口通讯能达到的速度 LabVIEW支持高效的串口通讯，通过优化设置，理论上可以实现每次接收一个字节时达到1ms甚至更短的周期。不过，实际性能会受到以下因素的限制： 波特率（Baud Rate）：…...

编程日记 2025/7/18 17:17:15

Jmeter中的监听器

3）监听器 1--查看结果树用途调试测试计划：查看每个请求的详细信息，帮助调试和修正测试计划。分析响应数据：查看服务器返回的响应数据，验证请求是否成功。检查错误：识别和分析请求失败的原因。配置步骤…...

编程日记 2025/7/18 16:42:15

缺失的第一个正数(java)

题目描述： 给你一个未排序的整数数组 nums ，请你找出其中没有出现的最小的正整数。请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。示例 1： 输入：nums [1,2,0] 输出：3 解释：范围 […...

编程日记 2025/7/18 16:44:22

跨部门文件共享安全：平衡协作与风险的关键策略

在现代企业中，跨部门协作已成为推动业务发展的关键因素。然而，随着信息的自由流动和共享，文件安全风险也随之增加。如何在促进跨部门协作的同时，确保文件共享的安全性，成为了一个亟待解决的问题。一、明确文件分类与…...

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

一键AI换脸软件，支持表情控制，唇形同步Facefusion-3.0.0发布！支持N卡和CPU，一键启动包

嗨,小伙伴们!还记得小编之前介绍的FaceFusion 2.6.1吗?今天给大家带来超级exciting的消息 —— FaceFusion 3.0.0闪亮登场啦! 🌟 3.0.0版本更新 🏗️ 全面重构:修复了不少小虫子,运行更稳定,再也不怕突然罢工啦! 😀 Live Portrait功能:新增…...

编程日记 2025/7/18 16:36:13

我要成为算法高手-递归篇

目录题目1：汉诺塔题目2：合并两个有序链表题目3：反转链表题目4：两两交换链表中的结点题目5：Pow(x,n) 题目1：汉诺塔面试题 08.06. 汉诺塔问题 - 力扣（LeetCode） 解题思路&#xff1…...

编程日记 2025/7/18 16:33:06

Git 提交的相对引用

Git 提交的相对引用在 Git 中，使用 ~ 和 ^ 符号可以帮助你更灵活地引用提交历史中的特定提交。以下是这些符号的具体用法和示例： 1. ~（波浪号） ~ 符号用于指向上一个或多个父提交。它总是沿着第一个父提交的链向上追溯。 HEA…...

编程日记 2025/7/14 18:34:12

国内首家！阿里云人工智能平台 PAI 通过 ITU 国际标准测评

近日，阿里云人工智能平台 PAI 顺利通过中国信通院组织的 ITU-T AICP-GA（Technical Specification for Artificial Intelligence Cloud Platform：General Architecture）国际标准和《智算工程平台能力要求》国内标准一致性测评&…...

编程日记 2025/7/17 21:41:38

CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标

注：本文为 “CDAF / PDAF 原理 | PDAF、CDAF 和 LAAF 对比 | 图像清晰度评价指标” 几篇相关文章合辑。文章中部分超链接、图片异常受引用之前的原文所限。相机自动对焦原理 TriumphRay 于 2020-01-16 18:59:41 发布凸透镜成像原理这一部分大家中学应该就学过…...

编程日记 2025/7/8 21:44:00

小米C++ 面试题及参考答案下（120道面试题覆盖各种类型八股文）

指针和引用的区别？怎么实现的？指针和引用有以下一些主要区别。从概念上来说，指针是一个变量，它存储的是另一个变量的地址。可以通过指针来间接访问所指向的变量。例如，我们定义一个整型指针int *p;，它可以指向一个整型变量的内存地址。而引用是一个别名，它必须在定义的…...

编程日记 2025/7/17 20:34:52

WPF异步UI交互功能的实现方法

前面的文章我们提及过，异步UI的基础实现。基本思路主要是开启新的UI线程，并通过VisualTarget将UI线程上的Visual(即RootVisual)连接到主线程上的UI上即可渲染显示。但是，之前的实现访问是没有交互能力的，视觉树上的UI并不能实现…...

编程日记 2025/7/16 20:38:38

2024 java大厂面试复习总结（一）（持续更新）

10年java程序员，2024年正好35岁，2024年11月公司裁员，记录自己找工作时候复习的一些要点。 java基础 hashCode()与equals()的相关规定如果两个对象相等，则hashcode一定也是相同的两个对象相等，对两个对象分别调用eq…...

编程日记 2025/7/18 16:14:09

TCP/IP学习笔记

TCP\IP从实际应用的五层结构开始，自顶而下的去分析每一层。 TCP/IP五层架构概述学术上面是TCP/IP四层架构，OSI/ISO是七层架构，实际中使用的是TCP/IP五层架构。数据链路层 ICMP数据包分析 Wireshark抓包分析ICMP协议_wireshark抓ping包分析…...

编程日记 2025/7/16 5:29:31

基于IPMI的服务器硬件监控指标解读

在现代化数据中心中，服务器的稳定运行对于保障业务连续性至关重要。为了实时掌握服务器的健康状况，运维团队需要借助高效的监控工具。监控易作为一款功能强大的监控软件，支持使用IPMI（Intelligent Platform Management Interface&…...

编程日记 2025/7/15 17:45:04

相亲交友小程序项目介绍

一、项目背景在当今快节奏的社会生活中，人们忙于工作和事业，社交圈子相对狭窄，寻找合适的恋爱对象变得愈发困难。相亲交友作为一种传统而有效的社交方式，在现代社会依然有着巨大的需求。我们的相亲交友项目旨在为广大单身人士提…...

编程日记 2025/7/15 8:34:01

Day3 洛谷Day3 1161+1179+1200+1304

零基础洛谷刷题记录 Day1 2024.11.18 Day2 2024.11.25 Day3 2024.11.26 文章目录零基础洛谷刷题记录1161：题目描述1161：解题代码1161：学习成果1179：题目描述（成功写出）1179：解题代码1179&…...

编程日记 2025/7/9 1:20:26

【通俗理解】ELBO（证据下界）——机器学习中的“情感纽带”

【通俗理解】ELBO（证据下界）——机器学习中的“情感纽带” 关键词提炼 #ELBO #证据下界 #变分推断 #机器学习 #潜变量模型 #KL散度 #期望 #对数似然第一节：ELBO的类比与核心概念【尽可能通俗】 ELBO，即证据下界，在…...

编程日记 2025/7/10 1:16:30

Vue： computed 计算属性

在Vue中，computed属性是用于计算和返回基于其他响应式数据的值的功能。适合在模板中使用，因为能够根据依赖的数据自动更新。当依赖的数据变化时，computed属性会重新计算，并且会将结果缓存，以提高性能。 computed的…...

编程日记 2025/7/17 14:08:00

【自动化Selenium】Python 网页自动化测试脚本(上)

目录 1、Selenium介绍 2、Selenium环境安装 3、创建浏览器、设置、打开 4、打开网页、关闭网页、浏览器 5、浏览器最大化、最小化 6、浏览器的打开位置、尺寸 7、浏览器截图、网页刷新 8、元素定位 9、元素交互操作 10、元素定位 （1）ID定位 &…...

编程日记 2025/7/14 23:01:46

数据库命令规范、数据库基本设计规范

所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用mysql保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来） 数据库对象的命名要能做到见名识意，并且最后不要超过32个字符临时库表必…...

编程日记 2025/7/16 6:05:09

php常用伪协议整理

前言欢迎来到我的博客个人主页:北岭敲键盘的荒漠猫-CSDN博客本文整理php常见的伪协议 php伪协议介绍直观点，就是php可以识别的协议。类似于我们访问网站的http协议，我们用浏览器访问我们自己本地文件的file协议等。 php可以识别这些协议&#xf…...

编程日记 2025/7/13 19:34:30

Redis与MySQL如何保证数据一致性

Redis与MySQL如何保证数据一致性简单来说该场景主要发生在读写并发进行时，才会发生数据不一致。主要流程就是要么先操作缓存，要么先操作Redis，操作也分修改和删除。一般修改要执行一系列业务代码，所以一般直接删除成本较低…...

编程日记 2025/7/16 23:51:47

NIO三大组件

现在互联网环境下，分布式系统大相径庭，而分布式系统的根基在于网络编程，而netty恰恰是java领域的网络编程的王者，如果要致力于并发高性能的服务器程序、高性能的客户端程序，必须掌握netty网络编程。 NIO基础 NIO是从ja…...

编程日记 2025/7/15 5:12:13

智能呼叫中心是什么？

智能呼叫中心是什么？ 作者：开源智能呼叫中心系统 FreeIPCC，Github地址：https://github.com/lihaiya/freeipcc 智能呼叫中心是指运用人工智能、大数据分析等技术，对来电进行智能分析和处理的客户服务中心。以下是对智能…...

编程日记 2025/7/15 15:52:11

LSTM原理解读与实战

在RNN详解及其实战中，简单讨论了为什么需要RNN这类模型、RNN的具体思路、RNN的简单实现等问题。同时，在文章结尾部分我们提到了RNN存在的梯度消失问题，及之后的一个解决方案：LSTM。因此，本篇文章主要结构如下&#xff…...

编程日记 2025/7/17 11:11:44

24.11.26 神经网络参数初始化

神经网络感知神经网络神经网络（Neural Networks）是一种模拟人脑神经元网络结构的计算模型，用于处理复杂的模式识别、分类和预测等任务生物学： 人脑可以看做是一个生物神经网络，由众多的神经元连接而成树突&#…...

编程日记 2025/7/13 11:55:51

51单片机从入门到精通：理论与实践指南（一）

单片机在智能控制领域的应用已非常普遍，发展也很迅猛，学习和使用单片机的人员越来越多。虽然新型微控制器在不断推出，但51单片机价格低廉、易学易用、性能成熟，在家电和工业控制中有一定的应用，而且学好了51单片机&…...

编程日记 2025/7/13 9:22:09

wordpress获取文章总数、分类总数、tag总数等

在制作wordpress模板的时候会要调用网站的文章总数分类总数tag总数等这个数值，如果直接用count查询数据库那就太过分了。好在wordpress内置了一些标签可以直接获取到这些数值，本文整理了一些常用的wordpress网站总数标签。文章总数 <?php $count_…...

编程日记 2025/7/14 6:30:08

Tcon技术和Tconless技术介绍

文章目录 TCON技术（传统时序控制器）定义：主要功能：优点：缺点： TCONless技术（无独立时序控制器）定义：工作原理：优点：缺点： TCON与TCONl…...

编程日记 2025/7/18 10:31:05

WinFrom调用webapi接口另一个方法及其应用实例

1.调用接口方法代码如下： public class WebAPI{#region WebAPI调用 public async Task<string> Call_Webapi(string Url, string Json) //url传入的是接口名称，json传入的是接口参数{string responseBody string.Empty; //responseBod…...

编程日记 2025/7/16 11:06:05

上海乐鑫科技一级代理商飞睿科技，ESP32-C61高性价比WiFi6芯片高性能、大容量

在当今快速发展的物联网市场中，无线连接技术的不断进步对智能设备的性能和能效提出了更高要求。为了满足这一需求，乐鑫科技推出了ESP32-C61——一款高性价比的Wi-Fi 6芯片，旨在为用户设备提供更出色的物联网性能，并满足智能设备连…...

编程日记 2025/7/14 1:25:02

【机器学习】数据集合集！

本文将为您介绍经典、热门的数据集，希望对您在选择适合的数据集时有所帮助。 1 privacy 更新时间：2024-11-26 访问地址: GitHub 描述： 此存储库包含 TensorFlow Privacy（一种 Python）的源代码库，其中包…...

编程日记 2025/7/16 11:08:50

GitLab使用操作v1.0

1.前置条件 Gitlab 项目地址：http://******/req Gitlab账户信息：例如 001/******自己的分支名称：例如 001-master（注：master只有项目创建者有权限更新，我们只能更新自己分支，然后创建合并请求&…...

编程日记 2025/7/18 15:38:43

企业后端多租户管理平台

1 简介此系统在企业后端管理系统上进行的更改，用于快速开发租户管理平台。项目中详细的功能请查看文章：企业后端系统通用模版_后端模板-CSDN博客支持多租户，支持多租户切换，支持多租户数据隔离，支持多租户数据同步等…...

编程日记 2025/7/13 18:40:53

【模型学习之路】PyG的使用+基于点的任务

这一篇是关于PyG的基本使用目录前言 PyG的数据结构演示图的可视化基于点的任务任务分析 MLP GCN 前言对图结构感兴趣的朋友可以学一下常用的有关图结构的库：networkx详细介绍 networkx 库，探讨它的基本功能、如何创建图、操作图以及其常…...

编程日记 2025/7/18 14:56:01

Python 语言环境 python 的 pip 第三方库管理 sudo apt install python3-pippython 的 idle 界面 sudo apt install idle3R 语言环境 sudo apt install r-cran-zoo### RStudio 界面 ubuntu sudo snap install rstudio --classicJulia 语言环境 sudo snap install julia --…...

编程日记 2025/7/13 18:09:43

Android 常用命令和工具解析之Trace相关

目录 1、Perfetto基本用法 1.1 perfetto抓取命令 1.2 Perfetto主界面 1.3 Perfetto常用技巧 1.3.1 CPU的运行状态 1.3.2 CPU的频率 1.3.3 CPU的所有任务 1.3.4 判断是否低内存 1.3.5 CPU的负载计算 1.3.6 查看某进程是否运行在大核 1.3.7 CPU的大核占用率计算 2、应…...

编程日记 2025/7/14 8:46:06

使用IDEA构建springboot项目+整合Mybatis

目录目录 1.Springboot简介 2.SpringBoot的工作流程 3.SpringBoot框架的搭建和配置 4.用Springboot实现一个基本的select操作 5.SpringBoot项目部署非常简单，springBoot内嵌了 Tomcat、Jetty、Undertow 三种容器，其默认嵌入的容器是 Tomcat，…...

编程日记 2025/7/10 7:54:26