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>