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

CSS进阶空间转换和 less

news 2026/4/3 16:06:53

<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原生互操作终极方案（JEP 454/459/460深度落地）：银行系统JNI迁移真实压测数据全披露

第一章&#xff1a;Java原生互操作终极方案&#xff08;JEP 454/459/460深度落地&#xff09;&#xff1a;银行系统JNI迁移真实压测数据全披露在某国有大型商业银行核心支付清算子系统中&#xff0c;我们完成了从传统JNI到JEP 454&#xff08;Foreign Function & Memory AP…...

编程新知 2026/4/3 14:36:15

three.ar.js 终极入门指南：10分钟快速上手 WebAR 开发

three.ar.js 终极入门指南&#xff1a;10分钟快速上手 WebAR 开发 【免费下载链接】three.ar.js A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore 项目地址: https://gitcode.com/gh_mirrors/th/three.ar.js th…...

编程新知 2026/4/3 13:35:10

Qwen3.5-2B企业落地案例：制造业设备图片故障诊断辅助系统搭建

Qwen3.5-2B企业落地案例&#xff1a;制造业设备图片故障诊断辅助系统搭建 1. 项目背景与挑战 在制造业生产线上&#xff0c;设备故障诊断一直是影响生产效率的关键环节。传统方式依赖工程师人工巡检&#xff0c;存在以下痛点&#xff1a; 人力成本高&#xff1a;需要专业工程…...

编程新知 2026/4/3 13:10:56

UABEA：解锁Unity资源编辑新维度的跨平台工具箱

UABEA&#xff1a;解锁Unity资源编辑新维度的跨平台工具箱 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 你是否曾想过深入Unity游戏内部&#xff0c;查看、编辑甚至重构其中的纹理、音频、字体等各类…...

编程新知 2026/4/3 13:00:51

OpenClaw调试技巧：Qwen3.5-9B任务失败的回溯与日志分析

OpenClaw调试技巧&#xff1a;Qwen3.5-9B任务失败的回溯与日志分析 1. 为什么需要系统化的调试方法 上周我让OpenClaw帮我整理桌面上的100多份PDF文件&#xff0c;结果它把所有的会议纪要都归类到了"技术文档"文件夹。这个看似简单的任务背后&#xff0c;暴露了自动…...

编程新知 2026/4/3 10:43:31

NOKOV度量光学动捕系统赋能骨科手术机器人 破解股骨骨折微创植板精度难题

在精准医疗、医疗机器人的行业发展趋势下&#xff0c;股骨骨干骨折微创钢板植入手术的精度难题成为骨科临床与医工交叉领域的研究重点。山东大学张勤河教授团队重磅研发双模式机器人辅助股骨干骨折钢板植入方法&#xff0c;依托NOKOV 度量光学三维动捕系统实现手术轨迹的精准采…...

编程新知 2026/4/3 10:39:28

说说事务的传播级别？

面试 事务传播级别是 Spring 为了解决事务方法相互调用时事务如何传递的问题。默认传播级别是 REQUIRED&#xff0c;表示有事务就加入&#xff0c;没有事务就新建。...

编程新知 2026/4/3 8:55:29

终极指南：如何无需Steam客户端轻松下载创意工坊模组

终极指南&#xff1a;如何无需Steam客户端轻松下载创意工坊模组 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否曾因Steam客户端无法访问创意工坊而烦恼&#xff1f;或者…...

编程新知 2026/4/3 8:49:28

Phi-4-mini-reasoning应用场景：AI竞赛教练系统自动出题与解析

Phi-4-mini-reasoning应用场景&#xff1a;AI竞赛教练系统自动出题与解析 1. 引言&#xff1a;当AI遇见竞赛训练 想象一下&#xff0c;一位数学竞赛教练每天需要&#xff1a; 设计不同难度的题目准备详细的解题步骤针对学生错误提供个性化解析不断更新题库保持新鲜度 传统方…...

编程新知 2026/4/3 6:15:14

SAMD21 Turbo PWM：硬件级高精度同步PWM驱动详解

1. SAMD21 Turbo PWM 库深度解析&#xff1a;面向嵌入式工程师的高性能PWM驱动实践指南SAMD21 Turbo PWM 是一款专为基于 ATSAMD21G 微控制器&#xff08;如 Arduino Nano 33 IoT、Adafruit Itsy Bitsy M0、Trinket M0 等&#xff09;设计的底层硬件加速 PWM 库。它绕过 Arduin…...

编程新知 2026/4/3 5:46:55