#前端学习笔记#day12 旋转平移变量

变形平移
- 变形就是指通过css来改变元素的形状和位置，变形不会影响页面的布局
- transform: ;
- transform用来设置元素的变形效果
  - 平移：
    - transform: translateX();沿着x轴方向平移
    - translateY();沿着Y轴方向平移
    - translateZ();沿着Z轴方向平移
      - 平移元素，百分比是相对于自身进行计算的
      - Z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼的距离，距离越大，元素离人越近
      - Z轴平移属于立体效果，默认情况下网页是不支持透视的，如果需要看到这个效果，必须要设置网页的视距
      - 上图是设置视距，人眼距离网页的距离
满足这五点可以居中,但是这种居中方式只适用于元素的大小确定
如果块元素，大小被内容撑开，那么，可以使用这使得居中对齐，定位不可少，transform是使得自身居中，（自身往左移一半下移一半，居中），两个变形中间没有逗号
旋转
- 通过旋转可以使元素沿着x y或者z轴旋转指定的角度
  - transform:rotateZ();
  - transform:rotateX();
  - transform:rotateY();
    - 里面可以写1turn一圈
    - 45deg表示45度
  - backface-visibility: hidden;设置是否显示元素背面
    - 默认值visible
- 做一个秒针,转动的其实是秒针外面的容器，设置秒针不动，容器动，这样秒针就不会沿着自己中心旋转了。
  - 所以，秒针分针等，都需要在外面设置一个容器，钟内的所有子元素都居中对齐
  - 图片太大，设置一个background-size: cover;
复仇者联盟
- 设置3D效果，需要加个视距，800px
- 图片与图片之间有缝隙 vertical-align: top;
- 为元素设置透明效果opacity: 0.5;
- 转动的主要点：
  - 在父元素加上transform-style: preserve-3d; 和animation: rotate 10s infinite;
缩放
- scaleX()
- scaleY()
  - scaleX(2)表示放大两倍
  - scale(2) 表示水平垂直都放大两倍
- transform-origin: ;变形的原点
  - 默认是center
  - 可以改成0 0那就是从左上角缩放
less函数
- less是css的预处理语言
  - less是css增强版，用更少代码，实现更强大的功能
  - 在less中加了很多新特性，像对变量的支持
  - less的语法大体上和css语法一致，但是在less中添加了许多对css的扩展
    - 所以浏览器无法直接执行less代码，要执行必须先将less转换为css再由浏览器执行
  - 表示创建从1-3三个盒子
  - --color:#bga; 设置变量，格式：前面有--
  - 要用的时候var(--color)
  - 变量会使得维护和更换更加方便。
- calc(1000px/2)计算函数，可以直接计算括号内的式子
  - 但是兼容性不好，不要使用
less这样给子元素设置属性，结构会更加清晰
- less中单行注释的内容不会被解析到css中
变量
- 在变量中可以储存一个任意的值，并且可以在需要时，任意的修改变量中的值
- 变量的语法：
  - @变量名
  - 变量的使用注意
  - 变量发生重名时，会优先使用比较近的
  - >.box3 是子元素选择器
  - &就表示外层的父元素
  - p2继承了p1，且可以单独有自己的属性，extend对当前选择器进行扩展，且p3这种写法也可以进行扩展
  - p4就是工具人，加了括号之后显示不出来，但是别人可以用它，他创造出来就是被其他类使用的
混合函数
- 在混合函数中可以直接设置变量，要按照顺序传值，也可以设置默认值，@w:200px