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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/748824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

01——LenNet网络结构,图片识别

目录 1、model.py文件 &#xff08;预训练的模型&#xff09; 2、train.py文件&#xff08;会产生训练好的.th文件&#xff09; 3、predict.py文件&#xff08;预测文件&#xff09; 4、结果展示&#xff1a; 1、model.py文件 &#xff08;预训练的模型&#xff09; impor…

OceanBase中分区的运用

分区的概念 分区实质上是根据特定的规则&#xff0c;将表划分为若干个独立的物理存储单位。以MySQL为例&#xff0c;表会被拆分为多个物理文件。而在OceanBase​​​​​​​中&#xff0c;每个分区则表现为一个物理副本组&#xff0c;每个分区默认都拥有三个副本。 分区表的优…

lqb省赛日志[8/37]-[搜索·DFS·BFS]

一只小蒟蒻备考蓝桥杯的日志 文章目录 笔记DFS记忆化搜索 刷题心得小结 笔记 DFS 参考 深度优先搜索(DFS) 总结(算法剪枝优化总结) DFS的模板框架: function dfs(当前状态){if(当前状态 目的状态){}for(寻找新状态){if(状态合法){vis[访问该点]&#xff1b;dfs(新状态);?…

一道题学会如何使用哈希表

给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#xff1a; 输入&#xff1a;nums [1,2,3], …

视频素材哪里有?这几个高清无水印素材库看看

关于短视频素材&#xff0c;我知道大家都在找那种能让人一看就心旷神怡的地方&#xff0c;尤其是我们自媒体人&#xff0c;更是离不开这些优质的短视频素材来吸引观众的眼球。别着急&#xff0c;今天我就给大家安利几个网站&#xff0c;保证让你找到满意的短视频素材。 1&…

黑马微服务p30踩坑

报错详情 : orderservice开不起来 : 发生报错 : 然后检查了以下端口啥的 &#xff0c;配置啥的都是没有问题的 ; 解决办法 : 1 . 修改nacos1,2,3中的端口&#xff0c;将conf 中 cluster.conf中 的 127.0.0.1 全部改成自己本机的真实ipv4地址; 本机真实ipv4地址查看 :…

C#求水仙花数

目录 1.何谓水仙花数 2.求三位数的水仙花数 3.在遍历中使用Math.DivRem方法再求水仙花数 1.何谓水仙花数 水仙花数&#xff08;Narcissistic number&#xff09;是指一个 n 位正整数&#xff0c;它的每个位上的数字的 n 次幂之和等于它本身。例如&#xff0c;153 是一个 3 …

SpringBoot3下Kafka分组均衡消费实现

首先添加maven依赖&#xff1a; <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId><version>2.8.11</version><exclusions><!--此处一定要排除kafka-clients&#xff0c;然…

C++进阶:详解多态(多态、虚函数、抽象类以及虚函数原理详解)

C进阶&#xff1a;详解多态&#xff08;多态、虚函数、抽象类以及虚函数原理详解&#xff09; 结束了继承的介绍&#xff1a;C进阶&#xff1a;详细讲解继承 那紧接着的肯定就是多态啦 文章目录 1.多态的概念2.多态的定义和实现2.1多态的构成条件2.2虚函数2.2.1虚函数的概念2…

网站的上线部署

域名&#xff1a; 原本用于标识互联网上计算机使用的是IP地址&#xff0c;但是由于IP地址不便于记忆&#xff0c;所以人们便设计出来比较容易记忆的域名&#xff0c;然后通过DNS将域名和IP地址关联&#xff0c;这样人们便可以通过记忆域名直接访问到对应的计算机 DNS服务器&am…

Ant Design Pro complete版本的下载及运行

前言 complete 版本提供了很多基础、美观的页面和组件&#xff0c;对于前端不太熟练的小白十分友好&#xff0c;可以直接套用或者修改提供的代码完成自己的页面开发&#xff0c;简直不要太爽。故记录一些下载的步骤。 环境 E:\code>npm -v 9.8.1E:\code>node -v v18.1…

Apache Paimon 使用之 Lookup Joins 解析

Lookup Join 是流式查询中的一种 Join&#xff0c;Join 要求一个表具有处理时间属性&#xff0c;另一个表由lookup source connector支持。 Paimon支持在主键表和附加表上进行Lookup Join。 a) 准备 创建一个Paimon表并实时更新它。 -- Create a paimon catalog CREATE CAT…

RabbitMQ学习总结-延迟消息

1.死信交换机 一致不被消费的信息/过期的信息/被标记nack/reject的信息&#xff0c;这些消息都可以进入死信交换机&#xff0c;但是首先要配置的有私信交换机。私信交换机可以再RabbitMQ的客户端上选定配置-dead-letter-exchange。 2.延迟消息 像我们买车票&#xff0c;外卖…

Python | 机器学习中的模型验证曲线

模型验证是数据科学项目的重要组成部分&#xff0c;因为我们希望选择一个不仅在训练数据集上表现良好&#xff0c;而且在测试数据集上具有良好准确性的模型。模型验证帮助我们找到一个具有低方差的模型。 什么是验证曲线 验证曲线是一种重要的诊断工具&#xff0c;它显示了机…

基于Java+SpringMVC+vue+element宠物管理系统设计实现

基于JavaSpringMVCvueelement宠物管理系统设计实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源…

当你能量越来越高的时候, 你开始真正理解每一个人,

在追求个人成长和内心平静的道路上&#xff0c;我们不可避免地会意识到能量频率对于我们自身以及周围人的影响。随着能量越来越高&#xff0c;我们开始真正理解每一个人&#xff0c;意识到世界并非黑白分明&#xff0c;而是充满了各种不同的状态和选择。在这篇博客中&#xff0…

计算机二级C语言的注意事项及相应真题-4-程序设计

目录 31.找出学生的最高分&#xff0c;由函数值返回32.计算并输出下列多项式的值33.将一个数字字符串转换成与其面值相同的长整型整数。可调用strlen函数求字符串的长度34.将字符串中的前导*号全部移到字符串的尾部。函数fun中给出的语句仅供参考35.将一组得分中&#xff0c;去…

算法---滑动窗口练习-7(串联所有单词的子串)

串联所有单词的子串 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;串联所有单词的子串 2. 讲解算法原理 算法的基本思想是使用滑动窗口来遍历字符串s&#xff0c;并利用两个哈希表&#xff08;hash1和hash2&#xff09;来统计窗口中子串的频次。 …

docker容器技术基础入门-1

文章目录 容器(Container)传统虚拟化与容器的区别Linux容器技术Linux NamespacesCGroupsLXCdocker基本概念docker工作方式docker容器编排 容器(Container) 容器是一种基础工具&#xff1b;泛指任何可以用于容纳其他物品的工具&#xff0c;可以部分或完全封闭&#xff0c;被用于…

#QT(定时轮播电子相册)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a; &#xff08;1&#xff09;使用QOBJECT的TIMER &#xff08;2&#xff09;EVENT时间 &#xff08;3&#xff09;多定时器定时溢出判断 &#xff08;4&#xff09;QLABEL填充图片 3.记录 4.代码 widget.h #ifndef WIDGET_H…