CSS进阶空间转换和 less
<html>
<head>
<meta charset="UTF-8" />
<title>空间转换</title>
</head>
<body>
<!-- 空间转换
空间：是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
-->
<!-- 空间转换 -平移
属性：
transform：translate3d(x,y,z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值（正负均可）
像素单位数值
百分比（参照盒子自身尺寸计算结果）
电脑是平面的，默认情况下无法观察到 Z 轴平移的效果
-->
<!-- 视距perspective
作用：指定了观察者与Z=0平面的距离，为元素添加透视效果
透视效果：近大远小，近实远虚
属性：（添加给父级，取值范围800-1200）
perspective：视距;
-->
<!-- 空间旋转
transform:rotateZ（值）;
transform:rotateX (值);
transform:rotateY (值);
左手法制：根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转轴正值方向
自定义旋转轴：
rotate3d（x,y,z）:用来自定义旋转轴的位置及旋转的角度
x,y,z取值为0-1之间的数字
-->
<!-- 立体呈现 transform-style
作用：设置元素的子元素是位于3D空间中还是平面中
属性名：transform-style（给父级加）
属性值：flat：子级处于平面中
preserve-3d：子级处于3D空间
注意：每个面都有独立的坐标轴
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>less</title>
</head>
<body>
<!-- less是一个css与处理器，文件后缀是.less，使css具备一定的逻辑性，计算能力
注意：浏览器不识别less代码，目前阶段网页要引入对应的css文件
cscode插件：easy less保存less文件自动生成对应的css文件 -->
<!-- less-注释
单行注释
语法：//注释内容
快捷键：ctrl+/
块注释
语法：/*注释内容*/
快捷键：shift+alt+a -->
<!-- less运算
加、减、乘、直接书写计算表达式
除法需要添加小括号或. -->
<!-- less - 嵌套
作用：快速生成后代选择器
·father｛
color：red；
.son｛
width：200px；
a｛
color：green
//&表示的是当前选择器，代码写到谁的大括号里面就表示谁不会生成后代选择器
应用：配合hover伪类或nth-child结构伪类使用
&：hover｛color：blue
｝
｝｝｝ -->
<!-- less - 变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名：数据；
使用变量：css属性：@变量名；
-->
<!-- less-导入
作用：导入less公共样式文件
语法：导入@import“文件路径”
提示：如果是less文件可以省略后缀
@import‘./base.less’；
@import‘/common’；
-->
<!-- less - 导出
写法：在less文件的第一行添加//out：存储url
提示：文件夹名称后面添加/
//out：./css/
指定文件夹
// out：./index.css
生成对应的css
//out：.mycss/index.css
在mycss文件中生成index.css
禁止导出
写法：在文件第一行//out：false
-->
</body>
</html>
相关文章：
CSS进阶空间转换和 less
<html> <head> <meta charset"UTF-8" /> <title>空间转换</title> </head> <body> <!-- 空间转换 空间：是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同 空间转换也叫3D转…...
C/C++ 知识点：| 与 || 的区别
文章目录 一、|与 || 的区别1、按位或运算符 |2、逻辑或运算符 ||3、区别4、总结 前言 在C编程语言中，逻辑或运算符用于连接两个条件表达式，当至少有一个条件为真时，整个表达式的结果为真。C提供了两种逻辑或运算符：按位或|和逻辑…...
CSS中如何设置单行或多行内容超出后，显示省略号
1. 设置超出显示省略号 css设置超出显示省略号可分两种情况： 单行文本溢出显示省略号…多行文本溢出显示省略号… 但使用的核心代码是一样的：需要先使用 overflow:hidden;来把超出的部分隐藏，然后使用text-overflow:ellipsis;当文本超出时…...
PFA烧杯透明聚四氟乙烯刻度量杯
PFA烧杯，刻度清晰，耐酸碱，和有机溶剂。...
Redis底层数据结构之String
文章目录 1. 前提回顾2. RedisObject三大数据类型简介3. SDS字符串4. SDS字符串源码分析5. 总结 1. 前提回顾 前面我们说到redis的String数据结构在底层有多种编码方式。例如我们执行下面两条语句 set k1 v1 set age 17我们查看类型，发现这类型都是String类型 我们…...
【Maven学习笔记】Maven入门教程（适合新手反复观看学习）
Maven学习笔记 Maven的简要介绍Maven的安装和配置Maven的安装Maven安装的常用配置 Maven的使用入门编写pom编写主代码编写测试代码打包和运行使用Archetype生成项目骨架 Maven核心概念的阐述坐标案例分析依赖依赖的范围传递性依赖依赖范围依赖调节可选依赖Maven依赖常用的技巧 …...
idea Springboot 在线考试管理系统开发mysql数据库web结构java编程计算机网页
一、源码特点 springboot 在线考试管理系统是一套完善的完整信息系统，结合mvc框架和bootstrap完成本系统springboot spring mybatis ，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具有…...
Spring Cloud Alibab 入门搭建，包含Nacos中心，注册服务发现服务，Feign请求，GateWay网关，sentinel限流
源码在最后 一、安装Nacos注册中心 1.1查看Nacos官网，安装Nacos服务，下载源码或者安装包 1.2启动服务，默认端口为8848， 二、创建服务注册&发现 2.1使用脚手架，创建注册服务和发现服务项目，我用的版…...
ShardingSphere-SQL 解析 Issue 处理流程
ShardingSphere-SQL 解析 Issue 处理流程 这是之前给社区写的 SQL 解析 Issue 的处理流程，可以帮助社区用户快速参与到 ShardingSphere-SQL 解析任务当中。 ShardingSphere SQL 解析 issue 列表 Issue 背景说明 当前 Issue 使用自定义的爬虫脚本从对应的数据库官…...
【矩阵】48. 旋转图像【中等】
旋转图像 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1： 输入：matrix [[1,2,3],[4,5,6],[7,8,…...
高质量 Git 仓库汇总（持续更新，方便查看）
Leetcode https://github.com/kamyu104/LeetCode-Solutions Cmake https://github.com/viva64/pvs-studio-cmake-examples 3D目标检测 Awesome-3D-Object-Detection Awesome-3D-Object-Detection-for-Autonomous-Driving Cuda Code dbscan https://github.com/l3lackc…...
学习笔记-华为IPD转型2020：1，IPD的重要意义
华为产品开发转型：IPD计划 大多数公司发现，当公司大幅增长时，在较小规模上有效的管理实践不再有效。产品开发过程也是如此。随着华为的发展，该公司遇到了产品故障率更高、开发周期更长和研发成本增加等问题。然后，它转…...
【阿里云系列】-基于云效构建部署NodeJS项目到ACK
准备工作 01、编写Dockerfile文件可以根据不同的环境，新建不同的Dockerfile文件，比如Dockerfile-PROD # Deliver the dist folder with NginxFROM nginx:stable-alpine ENV LANGC.UTF-8 ENV TZAsia/ShanghaiCOPY dist/ /usr/share/nginx/html COPY ngi…...
Jmeter入参问题小记
表单入参的时候，这个地方需要勾选，如果不☑️选的话，会提示errorMsg":"Required String parameter code is not present",...
【四 （2）数据可视化之 Matplotlib 常用图表及代码实现 】
目录 文章导航一、介绍二、安装Matplotlib三、导入Matplotlib四、设置可以中文显示四、常用图形1、散点图（Scatter Plot）2.1、线性图（Line Plot）2.2、堆叠折线图2.3、多图例折线图3.1、柱状图/条形图（Bar Chart&#x…...
官网建设的江湖四大流派，一派苦撑、一派完犊子、另外两派搅局。
有人的地方就有江湖，有江湖的地方就有纷争，有纷争地方就有此起彼伏。 说好的，当赚够了钱就退出建站江湖，人就是江湖，怎么退？ 官网建设风起云涌20年，一方倒地，一方揭竿而起ÿ…...
Ubuntu 安装 KVM 虚拟化
1. Ubuntu 安装 KVM 虚拟化 KVM 是 Linux 内核中一个基于 hypervisor 的虚拟化模块，它允许用户在 Linux 操作系统上创建和管理虚拟机。 如果机器的CPU不支持硬件虚拟化扩展，是无法使用KVM(基于内核的虚拟机)直接创建和运行虚拟机的。此时最多只能使用…...
SA3D：基于 NeRF 的三维场景分割方法
Paper: Cen J, Zhou Z, Fang J, et al. Segment anything in 3d with nerfs[J]. Advances in Neural Information Processing Systems, 2024, 36. Introduction: https://jumpat.github.io/SA3D/ Code: https://github.com/Jumpat/SegmentAnythingin3D SA3D 是一种用于 NeRF 表…...
mysql实战开发之 mysql 删除一张表某个字段的sql语句
有一张表, 我需要删除这张表其中的某一个或者某几个字段, 相信大家在日常开发中应该会遇到这种情况, 然后刚好自己接触的项目安装的mysql关闭了允许远程连接的设置, 也就是说不允许使用类似于navicat 等可视化工具连接, 那么就没办法通过可视化工具直接去通过鼠标操作就可以 完…...
Selenium控制已运行的Edge和Chrome浏览器——在线控制 | 人机交互（详细启动步骤和bug记录）
文章目录 前期准备1. 浏览器开启远程控制指令（1）Edge（2）Chrome 2. 执行python代码（1）先启动浏览器后执行代码（2）通过代码启动浏览器（3）Bug问题记录1ÿ…...
为什么92%的Sora 2初学者卡在第4步？——帧一致性崩塌诊断工具包+时间轴锚点校准法
更多请点击： https://kaifayun.com 第一章：Sora 2视频生成的核心原理与环境准备 Sora 2并非OpenAI官方发布的模型，而是社区基于Sora技术理念构建的开源复现与增强框架，其核心依托于时空联合建模的扩散变换器（Spacetim…...
Shiro RememberMe反序列化漏洞深度解析与实战利用
1. 这个漏洞不是“老古董”，而是理解Java安全边界的活教材很多人看到CVE-2016-4437，第一反应是“Shiro都淘汰了，还讲这个干啥？”——我去年在给一家做政企内部系统的客户做渗透复测时，就遇到过一个上线三年的审批平台&…...
自制射频功率计：基于AD8317芯片，成本43欧元实现1MHz-10GHz测量
1. 项目概述：为什么我要亲手打造一台射频功率计在无人机和模型飞行器的圈子里，尤其是在我们荷兰FMS Spaarnwoude俱乐部，合规飞行是头等大事。我给我的八轴飞行器加装了云台相机和图传系统，工作在5.8GHz频段。根据本地法规…...
写论文的神助攻！好用的AI写作辅助软件，逻辑清晰质量高
作为一名刚完成毕业论文的过来人，我太懂写论文的痛苦了 —— 选题迷茫、文献浩如烟海、框架混乱、逻辑不清、反复修改、查重降重反复折腾... 直到我发现了这套 AI 写作工具组合，简直是论文写作的 "开挂神器"，效率直接拉满ÿ…...
开发转兼职DBA（二）：执行计划教我做事
开发转兼职DBA（二）：执行计划教我做事 查询慢了不知道为什么，加了索引还是慢，复合索引怎么建，执行计划怎么看——这些不是DBA的专利，是每个写SQL的开发者迟早要面对的事。 文章目录 开发转兼职DB…...
FT231XQ USB串口桥接板设计解析与实战应用指南
1. 项目概述：从FT232R到FT231XQ的USB串口桥接板演进在嵌入式开发和硬件调试的日常工作中，一个可靠、小巧且功能清晰的USB转串口（UART）桥接板（Breakout Board， 简称BoB）几乎是工程师手边的标配工…...
科华UPS电源全品类汇总：选型与场景适配指南
科华UPS电源作为国内智慧电能领域的主流产品，覆盖家用、办公、机房、工业等全场景，产品系列丰富、规格齐全，但多数用户在选型时，常因分不清系列差异、功率适配、架构类型而踩坑。本文系统汇总科华UPS电源的核心分类、主流系列、核…...
Qri高级功能：如何使用JSON Schema验证和描述数据集结构
Qri高级功能：如何使用JSON Schema验证和描述数据集结构 【免费下载链接】qri youre invited to a data party! 项目地址: https://gitcode.com/gh_mirrors/qr/qri Qri是一个强大的开源数据协作工具，它提供了丰富的功能来帮助用户管理、共享和验证…...
如何在5分钟内免费搭建工业级OpenPLC虚拟控制器
如何在5分钟内免费搭建工业级OpenPLC虚拟控制器 【免费下载链接】OpenPLC Software for the OpenPLC - an open source industrial controller 项目地址: https://gitcode.com/gh_mirrors/op/OpenPLC OpenPLC是一款功能强大的开源虚拟PLC（可编程逻辑控制器&a…...
完整解决方案：PL2303 Windows 10驱动快速安装指南
完整解决方案：PL2303 Windows 10驱动快速安装指南 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 如果你正在Windows 10系统上使用PL-2303HXA或PL-2303XA芯…...