ximingx（帅鸿宇）

ximingx（帅鸿宇）

关注
发信
关注(28)粉丝(399)

数据可视化-CSS3

CSS3

数据可视化

数据可视化是将数据转换为图形或图表的过程，以便更好地理解和分析数据。它是数据分析和数据科学中的重要组成部分，可以帮助人们更好地理解数据中的模式和趋势。

  • 更好地理解数据：通过可视化数据，人们可以更好地理解数据中的模式和趋势，从而更好地分析数据。
  • 更好地传达信息：可视化数据可以帮助人们更好地传达信息，使得数据更容易被理解和接受。
  • 更好地发现问题：通过可视化数据，人们可以更容易地发现数据中的问题和异常，从而更好地解决这些问题。

前端可视化技术是指使用前端技术（如 HTML、CSS、JavaScript 等）来创建交互式的数据可视化。以下是一些常见的前端可视化技术：

  1. D3.js：D3.js 是一个流行的 JavaScript 库，用于创建各种类型的数据可视化，包括折线图、柱状图、散点图、饼图等等。它提供了强大的数据绑定和转换功能，使得数据可视化变得更加容易。
  2. Chart.js：Chart.js 是一个简单易用的 JavaScript 库，用于创建各种类型的图表，包括折线图、柱状图、饼图等等。它提供了丰富的配置选项和交互功能，使得图表的定制和交互变得更加容易。
  3. Three.js：Three.js 是一个流行的 JavaScript 库，用于创建 3D 可视化。它提供了丰富的 3D 渲染功能和交互功能，使得创建复杂的 3D 可视化变得更加容易。
  4. Leaflet.js：Leaflet.js 是一个流行的 JavaScript 库，用于创建交互式地图。它提供了丰富的地图渲染和交互功能，使得创建交互式地图变得更加容易。
  5. Highcharts：Highcharts 是一个流行的 JavaScript 库，用于创建各种类型的图表，包括折线图、柱状图、饼图等等。它提供了丰富的配置选项和交互功能，使得图表的定制和交互变得更加容易。

底层图形引擎是指用于渲染图形的软件库或框架。它们通常提供了一组 API，用于创建和操作图形对象，以及将这些对象渲染到屏幕上。

以下是一些常见的底层图形引擎：

  1. OpenGL：OpenGL 是一个跨平台的底层图形引擎，用于创建 2D 和 3D 图形。它提供了一组强大的 API，用于创建和操作图形对象，并将它们渲染到屏幕上。OpenGL 可以在多种操作系统和硬件平台上运行，包括 Windows、Mac、Linux、iOS 和 Android。
  2. DirectX：DirectX 是一个由微软开发的底层图形引擎，用于创建 2D 和 3D 图形。它提供了一组强大的 API，用于创建和操作图形对象，并将它们渲染到屏幕上。DirectX 主要用于 Windows 平台上的游戏和图形应用程序开发。
  3. Vulkan：Vulkan 是一个跨平台的底层图形引擎，用于创建 2D 和 3D 图形。它提供了一组强大的 API，用于创建和操作图形对象，并将它们渲染到屏幕上。Vulkan 的设计目标是提供更高的性能和更低的 CPU 开销，以及更好的多线程支持。
  4. Metal：Metal 是一个由苹果开发的底层图形引擎，用于创建 2D 和 3D 图形。它提供了一组强大的 API，用于创建和操作图形对象，并将它们渲染到屏幕上。Metal 主要用于 iOS 和 macOS 平台上的游戏和图形应用程序开发。
  5. Skia 是一个跨平台的 2D 图形引擎，由 Google 开发和维护。它提供了一组强大的 API，用于创建和操作 2D 图形对象，并将它们渲染到屏幕上。Skia 可以在多种操作系统和硬件平台上运行，包括 Windows、Mac、Linux、Android 和 iOS。

transform

transform 是 CSS3 中的一个属性，用于对元素进行变换。它可以实现平移、旋转、缩放、倾斜等多种变换效果。

  • 用transform旋转或倾斜元素，会变换或倾斜元素的坐标系，不同的顺序会导致不同的变换结果，并且该元素所有后续变换都将基于新坐标系的变换
  • 2D坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴、y轴、z轴的正向分别朝向右、下和指向你的屏幕
  • 轻握左手，大拇指指向旋转轴正方向，四指指向的方向就是旋转方向，如果将一个元素绕 y 轴旋转 90 度，那么它的 x 轴将指向屏幕内部，即远离你。此时如再沿着 x 轴平移，元素不会向右移动，它会向内远离我们。

transform-origin 是 CSS3 中的一个属性，用于指定元素变换的原点，即坐标轴的位置。它可以改变 transform 属性中变换的起点

transform-origin 属性的默认值是 50% 50% 0，表示变换的原点位于元素的中心点。它可以接受多种值，包括关键字和长度值。以下是一些常见的 transform-origin 属性值：

  1. top：表示变换的原点位于元素的顶部中心点。
  2. bottom：表示变换的原点位于元素的底部中心点。
  3. left：表示变换的原点位于元素的左侧中心点。
  4. right：表示变换的原点位于元素的右侧中心点。
  5. center：表示变换的原点位于元素的中心点。
  6. 具体的长度值，如 10px、20% 等等。

2D动画

以下是一些常见的 transform 属性值：

  1. translate()：用于平移元素，可以指定水平和垂直方向的偏移量。例如：transform: translate(50px, 100px);
  2. rotate()：用于旋转元素，可以指定旋转角度。例如：transform: rotate(45deg);
  3. scale()：用于缩放元素，可以指定水平和垂直方向的缩放比例。例如：transform: scale(2, 1.5);
  4. skew()：用于倾斜元素，可以指定水平和垂直方向的倾斜角度。例如：transform: skew(30deg, 20deg);
  5. matrix()：用于指定任意的 2D 变换矩阵。例如：transform: matrix(1, 0.5, -0.5, 1, 0, 0);

3D动画

transform 属性不仅可以用于 2D 变换，还可以用于 3D 变换。通过 transform 属性的 3D 变换函数，可以实现元素在三维空间中的旋转、平移、缩放等效果。

以下是一些常见的 3D 变换函数：

  1. translate3d()：用于在三维空间中平移元素，可以指定 x、y、z 三个方向的偏移量。例如：transform: translate3d(50px, 100px, 0);
  2. rotate3d()：用于在三维空间中旋转元素，可以指定旋转轴和旋转角度。例如：transform: rotate3d(1, 1, 1, 45deg);
  3. scale3d()：用于在三维空间中缩放元素，可以指定 x、y、z 三个方向的缩放比例。例如：transform: scale3d(2, 1.5, 1);
  4. perspective()：用于设置元素的透视效果，可以指定透视距离。例如：transform: perspective(1000px);

3D形变函数会创建一个合成层来启用GPU硬件加速。

perspective

  • perspective 是 CSS3 中的一个属性，用于设置元素的透视效果。它可以模拟远近关系，使得元素在 3D 空间中的变换效果更加自然。
  • perspective 属性可以应用于父元素，也可以应用于子元素。它可以接受一个长度值，表示观察者与元素之间的距离。
  • 需要注意的是，perspective 属性只对 3D 变换起作用，对于 2D 变换没有任何效果。同时，perspective 属性的值越大，元素在 3D 空间中的变换效果越明显。

transform-style

  • transform-style 属性用于定义子元素在 3D 空间如何被呈现。它有两个可能的值：flat 和 preserve-3d。

  • 当 transform-style 属性设置为 flat 时，子元素将被平面化，不会在 3D 空间中呈现。这是默认值。

  • 当 transform-style 属性设置为 preserve-3d 时，子元素将在 3D 空间中呈现，且子元素的变换不会影响其它元素。

  • 下面是一个简单的例子，展示了 transform-style 属性的使用：

    <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            perspective: 1000px;
        }

        .card {
            width: 300px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1s;
        }

        .card:hover {
            transform: rotateY(180deg);
        }

        .card .front,
        .card .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .card .front {
            background-color: #f00;
        }

        .card .back {
            background-color: #0f0;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="front">Front</div>
        <div class="back">Back</div>
    </div>
</div>
</body>
</html>

    在这个例子中，.container 元素被设置了透视，.card 元素被设置为 preserve-3d，并且有一个鼠标悬停时的旋转效果。.front 和 .back 元素被设置为绝对定位，并且使用 backface-visibility 属性来隐藏它们的背面

  • <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: rotateX(-33.5deg) rotateY(45deg);
        }

        .item {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .top {
            background: rgba(89, 50, 50, .5);
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background: rgba(187, 32, 32, .5);
            transform: rotateX(-90deg) translateZ(100px);
        }

        .front {
            background: rgb(54, 183, 77, .5);
            transform: translateZ(100px);
        }

        .back {
            background: rgba(72, 25, 25, .5);
            transform: rotateY(180deg) translateZ(100px);
        }

        .left {
            background: rgba(225, 193, 193, .5);
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right {
            background: rgba(192, 207, 255, 0.5);
            transform: rotateY(90deg) translateZ(100px);
        }
    </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>

数据可视化-CSS3-LMLPHP

backface-visibility

  • backface-visibility 是 CSS3 中的一个属性，用于控制元素的背面是否可见。它可以接受两个值：visible 和 hidden。默认值是visible 。

    当 backface-visibility 属性的值为 visible 时，元素的背面会显示出来，当值为 hidden 时，元素的背面会被隐藏起来。

  • .item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 只改变了这个 */ 
    backface-visibility: hidden;
}

    数据可视化-CSS3-LMLPHP

  • <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #2b3a42;
            text-align: center;
        }

        .logo {
            position: relative;
            width: 200px;
            height: 200px;
        }

        .inner {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100px;
            width: 100px;
            margin: -50px 0 0 -50px;
            transform-style: preserve-3d;
            transform: rotateX(-33.5deg) rotateY(45deg);
            animation: innerLoop 4s ease-in-out infinite;
        }

        .outer {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 200px;
            margin: -100px 0 0 -100px;
            transform-style: preserve-3d;
            transform: rotateX(-33.5deg) rotateY(45deg);
            animation: outerLoop 4s ease-in-out infinite;
        }

        @keyframes innerLoop {
            0% {
                transform: rotateX(-33.5deg) rotateY(45deg);
            }
            50%,100% {
                transform: rotateX(-33.5deg) rotateY(-315deg);
            }
        }

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

        .item-inner {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #175d96;
            border: 1px solid #fff;
        }

        .item-outer {
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(174, 183, 218, 0.2);
            border: 2px solid #fff;
        }

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

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

        .front {
            transform: translateZ(50px);
        }

        .back {
            transform: rotateY(180deg) translateZ(50px);
        }

        .left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .right {
            transform: rotateY(90deg) translateZ(50px);
        }

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

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

        .front-outer {
            transform: translateZ(100px);
        }

        .back-outer {
            transform: rotateY(180deg) translateZ(100px);
        }

        .left-outer {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right-outer {
            transform: rotateY(90deg) translateZ(100px);
        }

    </style>
</head>
<body>
<div class="logo">
    <div class="inner">
        <div class="item-inner top"></div>
        <div class="item-inner bottom"></div>
        <div class="item-inner front"></div>
        <div class="item-inner back"></div>
        <div class="item-inner left"></div>
        <div class="item-inner right"></div>
    </div>
    <div class="outer">
        <div class="item-outer top-outer"></div>
        <div class="item-outer bottom-outer"></div>
        <div class="item-outer front-outer"></div>
        <div class="item-outer back-outer"></div>
        <div class="item-outer left-outer"></div>
        <div class="item-outer right-outer"></div>
    </div>
</div>
</body>
</html>

    数据可视化-CSS3-LMLPHP

动画优化

  • 使用 transform 和 opacity 属性来触发硬件加速，从而提高动画性能。
  • 使用 will-change 属性来预先告知浏览器哪些属性将会被修改，从而优化动画性能。
  • 使用 requestAnimationFrame 函数来控制动画的帧率，从而避免动画过于卡顿或者过于流畅。
  • 使用 transform: translateZ(0); 或 transform: translate3d(0, 0, 0); 属性来创建一个新的合成层，从而优化动画性能。
  • 避免使用 box-shadow 和 border-radius 等属性，因为它们会增加浏览器的计算负担。
  • 避免在动画中使用 display: none; 属性，因为它会触发重排和重绘，从而影响动画性能。
  • 避免在动画中使用 position: fixed; 属性，因为它会触发重排和重绘，从而影响动画性能。
  • 避免在动画中使用 background-image text-shadow filter clip-path 属性，因为它会增加浏览器的计算负担。
05-23 18:08
Powered by LMLPHP ©2024 ximingx（帅鸿宇） 0.005188