学习笔记 CSS权威指南 第16章 变形

冉娃娃cq
278 阅读5分钟

16.1 坐标系

  • 坐标系的3个轴及其作用
取值 x轴 y轴 z轴
正值 向右 向下 靠近自己
负值 向左 向上 远离自己
  • 坐标轴的注意事项
    • 每个轴都有自己的参照系
    • 各轴都相对于自身而动
    • 也就是说,旋转了元素,轴也跟着旋转

16.2 变形

16.2.1 基本概念transform

  • Transform的语法格式
    • 适用于除基元行内框之外的所有元素
    • 百分比相对于范围框
    • 1或多个变形函数组成,中间用空格分开
transform: rotate(30deg) skewX(-25deg) scaleY(2);

  • 什么是基元行内框

    • 像span a这一类的行内元素生成的框

  • 什么是范围框

    • 元素边框的外边界包裹的区域
    • SVG的范围框是SVG图形定义的对象范围框

  • 为什么不越看越基元行内框

    • 换行的行内框,旋转时是第一行旋转还是所有行都旋转没有固定标准

  • 范围框的注意事项

    • 变形后的元素,有自己的堆叠上下文
    • 范围框经过缩放的元素的范围框可能比变形前大或者小
    • 但是元素在页面上所占的空间保持不变

  • 变形函数的处理逻辑

    • 一次只执行一个
    • 从左向右依次执行(执行顺序非常重要)
    • 如果有一个变形函数失效,整条规则都将失效

  • 变形的样式叠加机制

    • 正常情况下都不叠加
    • 过渡和动画时会叠加
    • 使用用户交伪类时也会叠加(如:hover)

16.2.2 平移函数translate

  • translateX

  • translateY

    • 值可以是长度或百分数
    • 百分数相对元素自身尺寸计算

  • translate(x,y)

    • 省略y,默认为0

  • translateZ

    • 所有的Z轴都只能取绝对长度,不能有百分比
    • 元素没有深度时(默认情况下没有),Z轴上的效果看不到

  • translate3d(x,y,z)

    • 如果缺少值,没有默认值
    • 所有3d函数的每个值都必须有效,否则导致整条规则失效

  • 演示代码

16.2.3 缩放函数scale

相对于中心点,向两边缩放

  • scaleX

  • scaleY

  • scale(x,y)

    • 省略y,则和x一样

  • scaleZ

  • scale3d(x,y,z)

  • 取值限制

    • 只能是正数
    • 不能带单位

  • 演示代码

16.2.4 旋转函数

  • rotateX

  • rotateY

  • rotate

    • 效果等同于rotateZ

  • rotateZ

  • rotate3d(x,y,z,angle)

    • xyz是3d空间中向量的分量

  • 取值超过角度指定范围怎么办?

    • 会转换成范围内的值
    • 比如370deg会转换成10deg

  • 角度的单位有哪些

    • deg度
    • rad不知道
    • grad不知道
    • turn圈

  • 特别注意

    • 以下两个规则的效果并不相同
    • transform: rotate3d(2,3,4, 10deg)
    • transform: rotateX(20deg) rotateY(30deg) rotateZ(40deg)

  • 示例代码

16.2.5 倾斜函数skew

  • skewX

  • skewY

  • skew(x,y)

    • 不指定y,默认为0
    • 是通过矩阵运算进行倾斜的
    • 不等价于skewX() skewY()

  • 注意

    • 元素不能沿z轴或3d空间中的向量倾斜

  • 示例代码

16.2.6 视域函数perspective

  • 什么是视域

    • 一个人的视力范围

  • 视域在变形中有什么作用

    • 设置元素的前后深度

  • 视域的效果

    • 值越大视角越温和
    • 值越小视角越极端

  • 视域的最佳实践

    • 小于300px的比较失真
    • 500px至1000px比较适中
    • 2000px以上比较温和

  • 视域的取值范围

    • 正整数

  • 注意事项

    • perspective()函数应该放在依赖它的变形函数前面

  • 演示代码

16.2.7 3d变形

这一节是我自己加的,要把向量分量彻底搞清楚,才能预测3d上的各种变形最终会产生什么效果,看时间的形状里面,学到两个很重要的东西,其中一个是,真理是可以进行推理并被证伪的. 如果学了这些东西,我不能根据一组数字推算出应该显示的效果,那么就说我还没有掌握这个知识点.so,要把这个搞明白.

16.2.8 矩阵函数

等先把线性函数学完了来.学线性函数等我把CSS/HTTP/JS过完了,刷算法题的时候再来看,估计要到2020年去了

16.3 其他变形属性

16.3.1 移动原点transform-origin

  • 默认值

    • 50% 50%
    • 默认情况下,所有的变形都是相对于元素的绝对中心计算的

  • 应用规则

    • z轴只能使用长度值,不能用百分数
    • 设置距离元素左上角的距离
    • 百分数是相对于轴所对应的元素尺寸计算

  • 演示代码

16.3.2 设置子元素是在3d中还是在平面中transform-style

这个还是从MDN上看的示例图和说明清晰一些.书上的不够明朗

注意事项

  • 可能会被被其他属性覆盖
  • 如果下面的属性,值不是默认的话,就会出现这种情况,当然我没一个一个的去测试
    • overflow
    • filter
    • clip
    • clip-path
    • mask-image
    • mask-border-source
    • mix-blend-mode
  • 示例代码

16.3.3 修改视域perspective

  • 和perspective函数的区别
    • 函数只应用于当前元素,且必须放在变形函数前面
    • 这个属性是应用到所有子元素上

16.3.4 设置视域原点perspective-origin

在3d空间上的视觉原点...有点抽象.不想做笔记了,现在都十点半了,今天这个搞了,HTTP的日记都不想做了

  • 和perspective-origin的区别
    • 前者是围绕哪个点变形,而这个是视线汇聚于哪一个点..是不是很抽象嘛
    • 前者是应用于当前元素,而这个是应用于子元素

大致可以理解为,子元素在3d空间上变形时,向哪个方向上看

16.3.4 处理背面backface-visibility

是否渲染元素背面效果

  • hidden
  • visibility

必须基于有视觉深度的元素才会生效

TODO

16.1 要把向量搞清楚

  • 首先要去把线性代数过一下,掌握基础的数学概念再回来弄,这个必须把它突破过去.canvas里面也有涉及到,一定要跨越数学这个坎
  • 线性代数学习地址 www.bilibili.com/video/av598…

16.2.7 要把矩阵函数搞清楚,包括二维和三维的

avatar
文章
阅读
粉丝