AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

数据可视化（二）：CSS3

2023-01-04 176
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 数据可视化（二）：CSS3

:::info{title="相关信息"}
CSS3 中有三个重要的动画属性，transition、animation和 transform。本篇文章主要对transition 中的 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 形变。
◼ 3D 形变函数会创建一个合成层来启用GPU硬件加速，比如： translate3d、translateZ、 scale3d 、 rotate3d ...

1. 3D旋转

1. rotateZ 、rotateX、rotateY

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

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

  • 值个数

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

  • 值类型：

    • deg：<angle> 类型，表示旋转角度（不是弧度）。
    • 正数为顺时针
    • 负数为逆时针
  • 简写：rotate3d(x, y, z, deg)
  • 注意：旋转的原点受 transform-origin 影响

image.png

2. rotate3d

  • 旋转：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

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

image.png

2. 3D透视

  • 透视：perspective

    • 定义了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果（z 表示Z 轴）。
    • z>0 的三维元素比正常的大，而 z<0 时则比正常的小，大小程度由该属性的值决定。

  • 值个数

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

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

    • none：没有应用 perspective 样式时的默认值。
    • length：定观察者距离 z=0 平面的距离(如下图 d 的距离，单位 px)。

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

  • 透视的两种使用方式：

    1. 在父元素上定义 CSS 透视属性
    2. 如果它是子元素或单元素子元素，可以使用函数 perspective()

  • 透视演练场：

image.png

3. 3D位移

1. translateX、translateY、translateZ

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

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

  • 值个数

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

  • 值类型：

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

2. translate3d

平移：translate3d(tx, ty, tz)

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

  • 值个数

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

  • 值类型：

    • tx：是一个 <length> 代表移动向量的横坐标。
    • ty：是一个 <length> 代表移动向量的纵坐标。
    • tz：是一个 <length> 代表移动向量的 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)。

4. 3D缩放

1. scaleX、scaleY、scaleZ

  • 缩放：scaleX、scaleY、scaleZ

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

  • 值个数

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

  • 值类型：

    • 数字：

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

    • 百分比：不支持百分比

2. scaleX、scaleY、scaleZ

  • 缩放：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)。

5. 3D空间

  • 变换式：transform-style

    • 该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中。
    • 在3D空间中同样是可以使用透视效果。

  • 值类型：

    • flat：指示元素的子元素位于元素本身的平面内。
    • preserve-3d：指示元素的子元素应位于 3D 空间中。

image.png

  • 背面可见性：backface-visibility

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

  • 值类型：

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

image.png

6. 实例1：制作一个骰子

先将骰子的六个面绘制出来

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.dice-wrapper {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dice-face {
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10%;
  display: grid;
  place-items: center;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

.dot {
  display: inline-block;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #000;
}

.dot:nth-child(2) {
  grid-area: b;
}

.dot:nth-child(3) {
  grid-area: c;
}

.dot:nth-child(4) {
  grid-area: d;
}

.dot:nth-child(5) {
  grid-area: e;
}

.dot:nth-child(6) {
  grid-area: f;
}

.dot:nth-child(odd):last-child {
  grid-area: g;
}
<div class="dice-wrapper">
  <div class="dice-face first-face">
    <span class="dot"></span>
  </div>
  <div class="dice-face second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face fourth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="fifth-face dice-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice-face sixth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

image.png

现在将dice-wrapper稍作修改：

/* 在父元素中添加 transform-style来启用3D空间 */
transform-style: preserve-3d;
transform: rotateX(-33.5deg) rotateY(45deg);

此时六个面的这样的：

image.png

接下来我们一个个调整位置

第一个面

.first-face {
  transform: rotateX(90deg) translateZ(100px);
}

image.png

第二个面

.second-face {
  transform: rotateX(-90deg) translateZ(100px);
}

image.png

第三个和第四个面

.third-face {
  transform: rotateY(0deg) translateZ(100px);
}
.fourth-face {
  transform: rotateY(-180deg) translateZ(100px);
}

image.png

最后两个面

.fifth-face {
  transform: rotateY(-90deg) translateZ(100px);
}
.sixth-face {
  transform: rotateY(90deg) translateZ(100px);
}

image.png

7.实例2：制作webpack logo

效果：

4.gif

上代码：

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;
}

.webpack-logo {
  width: 100%;
  height: 200px;
  /* border: 1px solid red; */

  position: relative;
}

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

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

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

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

.cube-inner li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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: rotateX(0deg) translateZ(25px);
}

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

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

/* cube outer */
.cube-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键,不要用 transform */
  margin: -50px 0px 0px -50px;
  width: 100px;
  height: 100px;

  /* 启用3D空间 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  /* 帧动画 */
  animation: outerLoop 4s 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: rotateX(0deg) translateZ(50px);
}

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

.cube-outer .right {
  transform: rotateY(90deg) translateZ(50px);
}
<body>
  <div class="webpack-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>
文章标签：
C++
前端开发
数据可视化
异构计算
关键词：
数据可视化CSS
前端要努力QAQ
目录
相关文章
陌陌谣
|
监控 前端开发 数据可视化
数据可视化：内网流量监控软件的实时图表展示与HTML/CSS实现
在管理和监控内部网络流量时，数据可视化是一项至关重要的任务。它不仅可以帮助您更好地理解网络流量的趋势和模式，还可以及时发现潜在的问题。本文将介绍如何使用Ruby编写内网流量监控软件的扩展插件，以实现实时图表展示，同时提供自动提交监控数据到网站的解决方案。
陌陌谣
364 0
漏刻有时
|
前端开发 数据可视化
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
漏刻有时
69 0
漏刻有时
|
前端开发 数据可视化
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画
漏刻有时
224 0
漏刻有时
|
前端开发 数据可视化
漏刻有时数据可视化大屏常见问题(12)：CSS美化滚动条
漏刻有时数据可视化大屏常见问题(12)：CSS美化滚动条
漏刻有时
128 0
二二*一一
|
16天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
40 1
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
77 2
游客fz577umxdejsg
|
3月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
82 2
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
264 65
疯狂的猿
|
27天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
78 6
游客moiomvrp3vyac2
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代，拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识，一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解，这篇文章都将是你的理想指南。我们将探索基本概念，实现页面布局，并点缀以个性化样式，最终将静态页面转变为动态交互式网站。准备好了吗？让我们开始吧！
游客moiomvrp3vyac2
115 4