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>

相关推荐

  1. CSS空间转换 less

    2024-03-13 11:34:04       15 阅读
  2. CSS平面转换

    2024-03-13 11:34:04       24 阅读
  3. <span style='color:red;'>CSS</span><span style='color:red;'>进</span><span style='color:red;'>阶</span>

    CSS

    2024-03-13 11:34:04      29 阅读
  4. CSS

    2024-03-13 11:34:04       26 阅读
  5. <span style='color:red;'>CSS</span><span style='color:red;'>进</span><span style='color:red;'>阶</span>

    CSS

    2024-03-13 11:34:04      24 阅读
  6. <span style='color:red;'>CSS</span><span style='color:red;'>进</span><span style='color:red;'>阶</span>

    CSS

    2024-03-13 11:34:04      15 阅读
  7. <span style='color:red;'>CSS</span><span style='color:red;'>进</span><span style='color:red;'>阶</span>

    CSS

    2024-03-13 11:34:04      14 阅读
  8. <span style='color:red;'>CSS</span><span style='color:red;'>进</span><span style='color:red;'>阶</span>

    CSS

    2024-03-13 11:34:04      12 阅读
  9. C++--类型转换

    2024-03-13 11:34:04       28 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-13 11:34:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-13 11:34:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-13 11:34:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-13 11:34:04       18 阅读

热门阅读

  1. php7.3.4连接sqlserver(linux平台)

    2024-03-13 11:34:04       18 阅读
  2. 【Docker】APISIX Dashboard 容器化部署

    2024-03-13 11:34:04       17 阅读
  3. ubuntu 更换国内镜像源

    2024-03-13 11:34:04       19 阅读
  4. [element-ui] el-table组件滚动条的宽度设置

    2024-03-13 11:34:04       18 阅读
  5. 刨析目前市面上各注册中心产品的优劣势

    2024-03-13 11:34:04       16 阅读
  6. k8s Helm3详解 (部署,自定义,仓库,)

    2024-03-13 11:34:04       16 阅读
  7. vue3+elementPlus项目支持设置默认附件

    2024-03-13 11:34:04       18 阅读
  8. Kotlin Retrofit 网络请求

    2024-03-13 11:34:04       17 阅读
  9. Unity 地图数据生成

    2024-03-13 11:34:04       20 阅读
  10. Spring Boot- Validation

    2024-03-13 11:34:04       15 阅读
  11. LeetCode题练习与总结:搜索旋转排序数组

    2024-03-13 11:34:04       16 阅读
  12. 【leetcode热题】反转字符串中的单词

    2024-03-13 11:34:04       21 阅读