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

CSS进阶空间转换和 less

news 2026/2/9 10:02:08

<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> <!-- 空间转换 空间&#xff1a;是从坐标轴角度定义的X,Y,和Z三条坐标轴构成一个立体空间 Z轴位置与视线方向相同 空间转换也叫3D转…...

编程日记 2024/3/16 15:11:02

C/C++ 知识点：| 与 || 的区别

文章目录 一、|与 || 的区别1、按位或运算符 |2、逻辑或运算符 ||3、区别4、总结 前言 在C编程语言中&#xff0c;逻辑或运算符用于连接两个条件表达式&#xff0c;当至少有一个条件为真时&#xff0c;整个表达式的结果为真。C提供了两种逻辑或运算符&#xff1a;按位或|和逻辑…...

编程日记 2024/3/16 15:04:55

CSS中如何设置单行或多行内容超出后，显示省略号

1. 设置超出显示省略号 css设置超出显示省略号可分两种情况&#xff1a; 单行文本溢出显示省略号…多行文本溢出显示省略号… 但使用的核心代码是一样的&#xff1a;需要先使用 overflow:hidden;来把超出的部分隐藏&#xff0c;然后使用text-overflow:ellipsis;当文本超出时…...

编程日记 2024/3/16 15:03:54

PFA烧杯透明聚四氟乙烯刻度量杯

PFA烧杯&#xff0c;刻度清晰&#xff0c;耐酸碱&#xff0c;和有机溶剂。...

编程日记 2024/3/16 15:02:53

Redis底层数据结构之String

文章目录 1. 前提回顾2. RedisObject三大数据类型简介3. SDS字符串4. SDS字符串源码分析5. 总结 1. 前提回顾 前面我们说到redis的String数据结构在底层有多种编码方式。例如我们执行下面两条语句 set k1 v1 set age 17我们查看类型&#xff0c;发现这类型都是String类型 我们…...

编程日记 2024/3/16 14:58:49

【Maven学习笔记】Maven入门教程（适合新手反复观看学习）

Maven学习笔记 Maven的简要介绍Maven的安装和配置Maven的安装Maven安装的常用配置 Maven的使用入门编写pom编写主代码编写测试代码打包和运行使用Archetype生成项目骨架 Maven核心概念的阐述坐标案例分析依赖依赖的范围传递性依赖依赖范围依赖调节可选依赖Maven依赖常用的技巧 …...

编程日记 2024/3/16 14:57:48

idea Springboot 在线考试管理系统开发mysql数据库web结构java编程计算机网页

一、源码特点 springboot 在线考试管理系统是一套完善的完整信息系统&#xff0c;结合mvc框架和bootstrap完成本系统springboot spring mybatis &#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有…...

编程日记 2024/3/16 14:55:46

Spring Cloud Alibab 入门搭建，包含Nacos中心，注册服务发现服务，Feign请求，GateWay网关，sentinel限流

源码在最后 一、安装Nacos注册中心 1.1查看Nacos官网&#xff0c;安装Nacos服务&#xff0c;下载源码或者安装包 1.2启动服务&#xff0c;默认端口为8848&#xff0c; 二、创建服务注册&发现 2.1使用脚手架&#xff0c;创建注册服务和发现服务项目&#xff0c;我用的版…...

编程日记 2024/3/16 14:50:42

ShardingSphere-SQL 解析 Issue 处理流程

ShardingSphere-SQL 解析 Issue 处理流程 这是之前给社区写的 SQL 解析 Issue 的处理流程&#xff0c;可以帮助社区用户快速参与到 ShardingSphere-SQL 解析任务当中。 ShardingSphere SQL 解析 issue 列表 Issue 背景说明 当前 Issue 使用自定义的爬虫脚本从对应的数据库官…...

编程日记 2024/3/16 14:43:34

【矩阵】48. 旋转图像【中等】

旋转图像 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,…...

编程日记 2024/3/16 14:40:30

高质量 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…...

编程日记 2024/3/16 14:38:28

学习笔记-华为IPD转型2020：1，IPD的重要意义

华为产品开发转型&#xff1a;IPD计划 大多数公司发现&#xff0c;当公司大幅增长时&#xff0c;在较小规模上有效的管理实践不再有效。产品开发过程也是如此。随着华为的发展&#xff0c;该公司遇到了产品故障率更高、开发周期更长和研发成本增加等问题。然后&#xff0c;它转…...

编程日记 2024/3/16 14:37:27

【阿里云系列】-基于云效构建部署NodeJS项目到ACK

准备工作 01、编写Dockerfile文件可以根据不同的环境&#xff0c;新建不同的Dockerfile文件&#xff0c;比如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…...

编程日记 2024/3/16 14:36:26

Jmeter入参问题小记

表单入参的时候&#xff0c;这个地方需要勾选&#xff0c;如果不☑️选的话&#xff0c;会提示errorMsg":"Required String parameter code is not present",...

编程日记 2024/3/16 14:33:22

【四 （2）数据可视化之 Matplotlib 常用图表及代码实现 】

目录 文章导航一、介绍二、安装Matplotlib三、导入Matplotlib四、设置可以中文显示四、常用图形1、散点图&#xff08;Scatter Plot&#xff09;2.1、线性图&#xff08;Line Plot&#xff09;2.2、堆叠折线图2.3、多图例折线图3.1、柱状图/条形图&#xff08;Bar Chart&#x…...

编程日记 2024/3/16 14:30:19

官网建设的江湖四大流派，一派苦撑、一派完犊子、另外两派搅局。

有人的地方就有江湖&#xff0c;有江湖的地方就有纷争&#xff0c;有纷争地方就有此起彼伏。 说好的&#xff0c;当赚够了钱就退出建站江湖&#xff0c;人就是江湖&#xff0c;怎么退&#xff1f; 官网建设风起云涌20年&#xff0c;一方倒地&#xff0c;一方揭竿而起&#xff…...

编程日记 2024/3/16 14:22:09

Ubuntu 安装 KVM 虚拟化

1. Ubuntu 安装 KVM 虚拟化 KVM 是 Linux 内核中一个基于 hypervisor 的虚拟化模块&#xff0c;它允许用户在 Linux 操作系统上创建和管理虚拟机。 如果机器的CPU不支持硬件虚拟化扩展&#xff0c;是无法使用KVM(基于内核的虚拟机)直接创建和运行虚拟机的。此时最多只能使用…...

编程日记 2024/3/16 14:18:03

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 表…...

编程日记 2024/3/16 14:17:02

mysql实战开发之 mysql 删除一张表某个字段的sql语句

有一张表, 我需要删除这张表其中的某一个或者某几个字段, 相信大家在日常开发中应该会遇到这种情况, 然后刚好自己接触的项目安装的mysql关闭了允许远程连接的设置, 也就是说不允许使用类似于navicat 等可视化工具连接, 那么就没办法通过可视化工具直接去通过鼠标操作就可以 完…...

编程日记 2024/3/16 14:11:58

Selenium控制已运行的Edge和Chrome浏览器——在线控制 | 人机交互（详细启动步骤和bug记录）

文章目录 前期准备1. 浏览器开启远程控制指令&#xff08;1&#xff09;Edge&#xff08;2&#xff09;Chrome 2. 执行python代码&#xff08;1&#xff09;先启动浏览器后执行代码&#xff08;2&#xff09;通过代码启动浏览器&#xff08;3&#xff09;Bug问题记录1&#xff…...

编程日记 2024/3/16 14:09:56

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2026/2/6 5:45:36

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...

编程新知 2025/9/25 19:59:14

Vue 实例的数据对象详解

Vue 实例的数据对象详解 在 Vue 中，数据对象是响应式系统的核心，也是组件状态的载体。理解数据对象的原理和使用方式是成为 Vue 专家的关键一步。我将从多个维度深入剖析 Vue 实例的数据对象。 一、数据对象的定义方式 1. Options API 中的定义 在 Options API 中，使用 …...

编程新知 2025/12/7 4:13:41