数据可视化-CSS3

Rsquo
148 阅读10分钟

一、元素的坐标系统

1.1 坐标系

  • CSS 中的每个元素都有一个坐标系，其原点位于元素的左上角，左上角则被称为初始坐标系。

    • 用transform时，坐标系的原点默认会移动到元素的中心

    • 因为transform-origin属性的默认值为50% 50%，即该原点将会作为变换元素的中心点

    • 用transform属性旋转或倾斜元素，会变换或倾斜元素的坐标系。并且该元素所有后续变换都将基于新坐标系的变换。

    • 因此，transform属性中变换函数的顺序非常重要——不同的顺序会导致不同的变换结果。

  • 例如：

    • 如果将一个元素绕 y 轴旋转 90 度，那么它的 x 轴将指向屏幕内部，即远离你。

    • 此时如再沿着 x 轴平移，元素不会向右移动，它会向内远离我们。

    • 因此，要注意编写转换函数的顺序，其中transform属性中的第一个函数将首先应用，最后一个函数将最后应用。

1.2 坐标原点

origin.png

  • transform-origin：变形的原点（即坐标系0 , 0点）

  • 一个值：

    • 设置 x轴 的原点， y轴为默认值 50%。

  • 两个值：

    • 设置 x轴 和 y轴 的原点

  • 三个值：

    • 设置 x轴、 y轴 和 z轴 的原点

  • 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个

    • left, center, right, top, bottom关键字

    • length：从左上角开始计算

    • 百分比：参考元素本身大小

二、3D动画

  • CSS3 transform属性不但允许进行2D的旋转，缩放或平移指定的元素，还支持3D变换元素。

  • 常见的函数transform function有：

    • 平移：translate3d(tx, ty, tz)

      • translateX(tx) 、translateY(ty)、translateZ(tz)

    • 缩放：scale3d(sx, sy, sz)

      • scaleX(sy)、scaleY(sy)、scaleZ(sz)、

    • 旋转：rotate3d(x, y, z, a)

      • rotateX(x)、rotateY(y)、rotateZ(z)

  • 3D形变函数会创建一个合成层来启用GPU硬件加速，比如： translate3d、 translateZ、 scale3d 、 rotate3d

2.1 旋转

  • 旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)

    • 该CSS函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度确定：为正，旋转将为顺时针，为负，则为逆时针。

    • 值个数

      • 只有一个值，表示旋转的角度（单位deg）

    • 值类型：

      • deg： 类型，表示旋转角度（不是弧度）。

      • 正数为顺时针

      • 负数为逆时针

    • 简写：rotate3d(x, y, z, deg)

    • 注意：旋转的原点受 transform-origin 影响

  • 旋转：rotate3d(x, y, z, a)

    • 该CSS 函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度定义：为正，运动将为顺时针，为负，则为逆时针。

    • 值个数

      • 一个值时，表示 z轴 旋转的角度

      • 四个值时，表示在 3D 空间之中，旋转有 x,y,z 个旋转轴和一个旋转角度。

    • 值类型：

      • x：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量( 用来计算形变矩阵中的值 )。

      • y：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。

      • z：<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。

      • a：<angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

    • 注意：旋转的原点受transform-origin影响

  • rotateXYZ VS rotate3d

    image.png

    • 旋转函数，最终会生成一个4*4的矩阵

    image.png

  • 代码示例

    .box{
  width: 200px;
  height: 100px;
  background-color: skyblue;

  /* 形变 */
  /* transform: rotateX(-33.5deg) rotateY(45deg); */
  /* transform: rotateZ(45deg); */

  /* 简写 */
  /* transform: rotate(45deg); */
  transform: rotate3d(0, 0, 1, 45deg);
}

2.2 透视

image.png

  • 透视：perspective

    • 定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果（z表示Z轴）。

    • z>0 的三维元素比正常的大，而 z<0 时则比正常的小，大小程度由该属性的值决定。

  • 值个数

    • 只有一个值，表示观察者距离 z=0 的平面距离 和 none

  • 必须是<none> <length>中的一个

    • none：没有应用 perspective 样式时的默认值。

    • length：定观察者距离 z=0 平面的距离(单位px)。

    • 为元素及其内容应用透视变换。当值为 0 或负值时，无透视变换。

  • 透视的两种使用方式：

    • 在父元素上定义 CSS 透视属性
      • perspective: 200px;
    • 如果它是子元素或单元素子元素，可以使用函数 perspective()
      • transform: perspective(200px) rotateY(60deg);

  • 透视演练场：

2.3 平移

  • 平移：translateX(x)、translateY(y)、translateZ(z)

    • 该函数表示在二、三维平面上移动元素。

    • 值个数

      • 只有一个值，设置对应轴上的位移

    • 值类型：

      • 数字：100px

      • 百分比：参照元素本身（ refer to the size of bounding box ）

  • 平移：translate3d(tx, ty, tz)

    • 该CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

    • 值个数

      • 三个值时，表示在 3D 空间之中， tx, ty, tz 分别表示他在三个方向上移动的距离。

    • 值类型：

      • tx：是一个 代表移动向量的横坐标。

      • ty：是一个 代表移动向量的纵坐标。

      • tz：是一个 代表移动向量的 z 坐标。它不能是<percentage> 值；那样的移动是没有意义的。

    • 注意：

      • translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

      • translateY(ty) 等同于translate(0, ty) 或者 translate3d(0, ty, 0)。

      • translateZ(zx)等同于 translate3d(0, 0, tz)。

  • 代码示例

    .box{
  width: 200px;
  height: 100px;
  background-color: skyblue;

  /* 形变 */
  transform: translateX(100px) translateY(100px); 
  /* 简写 */
  transform: translate3d(100px, 100px, 0);

  /* 形变：近大远小 */
  transform: perspective(300px) translateZ(200px);
  
}

2.4 缩放

  • 缩放：scaleX、scaleY、scaleZ

    • 函数指定了一个沿 x、y 、z轴调整元素缩放比例因子。

    • 值个数

      • 一个值时，设置对应轴上的缩放（无单位）

    • 值类型：

      • 数字：

        • 1：保持不变
        • 2：放大一倍
        • 0.5：缩小一半

      • 百分比：不支持百分比

  • 缩放：scale3d(sx, sy，sz)

    • 该CSS函数定义了在 3D 空间中调整元素的缩放比例因子 。。

    • 值个数

      • 三个值时，表示在 3D 空间之中， sx, sy, sz 分别表示他在三个方向上缩放的向量。

    • 值类型：

      • sx：是一个<number>代表缩放向量的横坐标。

      • sy：是一个<number>表示缩放向量的纵坐标。

      • sz：是<number>表示缩放向量的 z 分量的 a（再讲到3D正方体再演示）。

    • 注意：

      • scaleX(sx) 等价于 scale(sx, 1) 或 scale3d(sx, 1, 1) 。

      • scaleY(sy) 等价于 scale(1, sy) 或 scale3d(1, sy, 1)。

      • scaleZ(sz) 等价于 scale3d(1, 1, sz)。

  • 代码示例

.box{
  width: 200px;
  height: 100px;
  background-color: skyblue;

  /* 形变 */
  transform: scaleX(2) scaleY(2);
  /* 简写 */
  transform: scale3d(2, 2, 1);
  transform-origin: 0 0;
}

2.5 3D空间

  • 变换式：transform-style

    • 该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中。

  • 在3D空间中同样是可以使用透视效果。

  • 值类型：

    • flat：指示元素的子元素位于元素本身的平面内。

    • preserve-3d：指示元素的子元素应位于 3D 空间中。

  • 代码示例

    image.png 
    .box{
  position: relative;
  width: 200px;
  height: 100px;
  background-color: skyblue;

  /* 在父元素中添加 transform-style来启用3D空间 */
  transform-style: preserve-3d;
  /* 在父元素添加透视效果 */
  perspective: 300px;
}

.item{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;

  /* 形变 */
   transform: rotateX(70deg) translateX(50px);
}

  • 绘制一个立方体

    image.png 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 100px;
    }

    .box {
      position: relative;
      width: 100px;
      height: 100px;
      /* background-color: red; */

      /* 启用3D空间 */
      transform-style: preserve-3d;
      transform: rotateX(-33.5deg) rotateY(45deg);
    }

    .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .top {
      background-color: rgba(255, 0, 0, 0.4);
      transform: rotateX(90deg) translateZ(50px);
    }

    .bottom {
      background-color: rgba(0, 255, 0, 0.4);
      transform: rotateX(-90deg) translateZ(50px);
    }

    .front {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(-90deg) translateZ(50px);
    }

    .back {
      background-color: rgba(0, 255, 255, 0.4);
      transform: rotateY(90deg) translateZ(50px);
    }

    .left {
      background-color: rgba(255, 255, 0, 0.4);
      transform: rotateY(180deg) translateZ(50px);
    }

    .right {
      background-color: rgba(0, 0, 255, 0.4);
      transform: translateZ(50px);
    }
  </style>
</head>
<body>
  <!-- 父元素(舞台) -->
  <div class="box">
    <!-- 子元素 -->
    <div class="item top">1</div>
    <div class="item bottom">2</div>
    <div class="item front">3</div>
    <div class="item back">4</div>
    <div class="item left">5</div>
    <div class="item right">6</div>
  </div>
</body>
</html>

2.6 元素背向可见

  • 背面可见性：backface-visibility

    • 该CSS 属性 backface-visibility 指定某个元素当背面朝向观察者时是否可见。

  • 值类型：

    • visible：背面朝向用户时可见。
    • hidden：背面朝向用户时不可见。

  • 代码示例

    .box{
  position: relative;
  width: 200px;
  height: 100px;
  background-color: skyblue;

  /* 在父元素添加透视效果 */
  perspective: 800px;
}

.item{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
  /* 形变 */
  /* transform: rotateY(180deg); */

  /* 元素背向是否可见 */
  backface-visibility: hidden;

  /* 帧动画 */
  animation: loop 6s linear infinite;
}

@keyframes loop{
  0%{
    transform: rotateY(0deg);
  }

  100%{
    transform: rotateY(-360deg);
  }
}

三、动画案例

3.1 webpack logo

  • 效果

    logo.png

  • html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <div class="logo">

    <!-- cube-inner -->
    <ul class="cube-inner">
      <li class="top"></li>
      <li class="bottom"></li>
      <li class="front"></li>
      <li class="back"></li>
      <li class="left"></li>
      <li class="right"></li>
    </ul>

    <!-- cube-outer -->
    <ul class="cube-outer">
      <li class="top"></li>
      <li class="bottom"></li>
      <li class="front"></li>
      <li class="back"></li>
      <li class="left"></li>
      <li class="right"></li>
    </ul>
  </div>

</body>
</html>

  • css

    html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #2b3a42;

  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo {
  width: 100%;
  height: 200px;

  position: relative;
}

.cube-inner {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键,不要用 transform */
  margin: -25px 0 0 -25px;
  /* background-color: red; */

  /* 3d空间 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  /* 帧动画 */
  animation: innerLoop 6s ease-in-out infinite;
}

@keyframes innerLoop {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  /* 3s 达到此状态后停止，一直保持这个状态到结束 */
  50%, 100% {
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

.cube-inner li {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #175d96;
  border: 1px solid white;
}

.cube-inner .top {
  transform: rotateX(90deg) translateZ(25px);
}

.cube-inner .bottom {
  transform: rotateX(-90deg) translateZ(25px);
}

.cube-inner .front {
  transform: rotateY(-90deg) translateZ(25px);
}

.cube-inner .back {
  transform: rotateY(90deg) translateZ(25px);
}

.cube-inner .left {
  transform: translateZ(25px);
}

.cube-inner .right {
  transform: translateZ(-25px);
}


.cube-outer {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  /* background-color: red; */

  /* 3d空间 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  /* 帧动画 */
  animation: outerLoop 6s ease-in-out infinite;
}

@keyframes outerLoop {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }

  50%, 100% {
    transform: rotateX(-33.5deg) rotateY(405deg);
  }
}

.cube-outer li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(141, 214, 249, 0.5);
  border: 1px solid white;
}

.cube-outer .top {
  transform: rotateX(90deg) translateZ(50px);
}

.cube-outer .bottom {
  transform: rotateX(90deg) translateZ(-50px);
}

.cube-outer .front {
  transform: rotateY(-90deg) translateZ(50px);
}

.cube-outer .back {
  transform: rotateY(90deg) translateZ(50px);
}

.cube-outer .left {
  transform: translateZ(-50px);
}

.cube-outer .right {
  transform: translateZ(-50px);
}

3.2 平台2.5D的动画

3.2.1 数据平台

动效.png

3.2.2 资产平台

动效1.png

/* 闪电效果 */
@keyframes guA {
  42% {
    opacity: 0;
    transform: translate(0, 0);
  }

  44%, 60% {
    opacity: 1;
  }

  62.5% {
    opacity: 0;
    transform: translateY(-40px);
  }

  63%, 100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}

@keyframes guB {
  40% {
    opacity: 0;
    transform: translate(0, 0);
  }

  46%, 59% {
    opacity: 1;
  }

  62.5% {
    opacity: 0;
    transform: translateY(-40px);
  }

  63%, 100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}

@keyframes guC {
  45% {
    opacity: 0;
    transform: translateY(0);
  }

  48%,
  58% {
    opacity: 1;
  }

  62.5% {
    opacity: 0;
    transform: translateY(-40px);
  }

  63%,
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}

/* 中间面板 */
@keyframes xiazai {
  62.5%, 100% {
    opacity: 0.2;
  }

  85% {
    opacity: 1;
  }
}

3.2.3 大数据平台

动效3.png

/* 推出方块1 */
@keyframes ban-right-tu2 {
  68.4% {
    transform: translate(0, 0);
    opacity: 0
  }

  70.4%,
  73.7% {
    opacity: 1
  }

  75.7%,
  100% {
    transform: translate(-18px, 10px);
    opacity: 1
  }
}

/* 推出方块2 */
@keyframes ban-right-tu4 {
  75.7% {
    transform: translate(0, 0);
    opacity: 0
  }

  77.7%,
  80% {
    opacity: 1
  }

  82%,
  100% {
    transform: translate(-14px, 7px);
    opacity: 1
  }
}

四、动画的性能优化

4.1 浏览器渲染流程

渲染流程.png

  1. 解析HTML，构建DOM Tree

  2. 对CSS文件进行解析，解析出对应的规则树

  3. DOM Tree + CSSOM 生成 Render Tree

  4. 布局（Layout）：计算出每个节点的宽度、高度和位置信息。

    • 页面元素位置、大小发生变化，往往会导致其他节点联动， 需要重新计算布局，这个过程称为回流（Reflow）。

  5. 绘制（Paint）：将可见的元素绘制在屏幕中。

    • 默认标准流是在同一层上绘制，一些特殊属性会创建新的层绘制，这些层称为渲染层。

    • 一些不影响布局的 CSS 修改也会导致该渲染层重绘（Repaint），回流必然会导致重绘。

  6. Composite合成层：一些特殊属性会创建一个新的合成层（ CompositingLayer ），并可以利用GPU来加速绘制，这是浏览器的一种优化手段。

    • 合成层确实可以提高性能，但是它以消耗内存为代价，因此不能滥用作为 web 性能优化策略和过度使用。

4.2 优化方案

4.2.1 创建一个新的渲染层

  • 有明确的定位属性（relative、fixed、sticky、absolute）

  • 透明度（opacity 小于 1）

  • 有 CSS transform 属性（不为 none）

  • 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画

  • backface-visibility 属性为 hidden

4.2.2 创建一个合成层

  • 对 opacity、transform、fliter、backdropfilter应用了animation或transition（需要是active的animation或者 transition）

  • 有 3D transform 函数：比如： translate3d、 translateZ、 scale3d 、 rotate3d ...

  • will-change 设置为 opacity、transform、top、left、bottom、right，比如：will-change: opacity , transform;

    • 其中 top、left等需要设置明确的定位属性，如 relative 等

4.2.3少用模糊 高斯模糊 和 渐变

4.2.4 控制动画

  • A 页面 跳转 B页面 ，停止掉 A 页面 的动画
avatar
文章
阅读
粉丝