CSS3-数据可视化
2D动画 - transform
CSS3 transform属性允许你旋转,缩放,倾斜或平移给定元素。
Transform是形变的意思(通常也叫变换),transformer就是变形金刚
常见的函数transform function有:
- 平移:translate(x, y)
- 缩放:scale(x, y)
- 旋转:rotate(deg)
- 倾斜:skew(deg, deg)
通过上面的几个函数,我们就可以改变某个元素的2D形变
坐标系
CSS3 transform属性允许你在二维或三维空间中直观地变换元素。
- transform属性会转换元素的坐标系,使元素在空间中转换。
- 用transform属性变换的元素会受transform-origin属性值的影响,该属性用于指定形变的原点。
元素的坐标系 - CSS 中的每个元素都有一个坐标系,其原点位于元素的左上角,左上角这被称为初始坐标系。
- 用transform时,坐标系的原点默认会移动到元素的中心。
- 因为transform-origin属性的默认值为50% 50%,即该原点将会作为变换元素的中心点。
- 用transform属性旋转或倾斜元素,会变换或倾斜元素的坐标系。并且该元素所有后续变换都将基于新坐标系的变换。
- 因此,transform属性中变换函数的顺序非常重要——不同的顺序会导致不同的变换结果。
例如: - 如果将一个元素绕 y 轴旋转 90 度,那么它的 x 轴将指向屏幕内部,即远离你。
- 此时如再沿着 x 轴平移,元素不会向右移动,它会向内远离我们。
- 因此,要注意编写转换函数的顺序,其中transform属性中的第一个函数将首先应用,最后一个函数将最后应用。
transform-origin
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动画 - transform
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 …
- rotateX(x)、rotateY(y)、rotateZ(z)
3D旋转 - rotateZ 、rotateX、rotateY
旋转:rotateX(deg)、rotateY(deg)、rotateZ(deg)
- 该CSS函数定义一个变换,它将元素围绕固定轴旋转。旋转量由指定的角度确定; 为正,旋转将为顺时针,为负,则为逆时针。
值个数 - 只有一个值,表示旋转的角度(单位deg)
值类型: - deg:< angle > 类型,表示旋转角度(不是弧度)。
- 正数为顺时针
- 负数为逆时针
简写:rotate3d(x, y, z, deg)
注意:旋转的原点受 transform-origin 影响
3D旋转 - rotateXYZ VS rotate3d
rotateX(50deg) 相当于 rotate3d(1, 0, 0, 50deg)
rotateY(20deg) 相当于 rotate3d(0, 1, 0, 20deg)
rotateZ(30deg) 相当于 rotate3d(0, 0, 1, 30deg)
3D位移 - translateX、translateY、translateZ
平移:translateX(x)、translateY(y)、translateZ(z)
- 该函数表示在二、三维平面上移动元素。
值个数 - 只有一个值,设置对应轴上的位移
值类型: - 数字:100px
- 百分比:参照元素本身( refer to the size of bounding box )
3D位移 - 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)。
3D缩放 - scaleX、scaleY、scaleZ
缩放:scaleX、scaleY、scaleZ
- 函数指定了一个沿 x、y 、z轴调整元素缩放比例因子。
值个数 - 一个值时,设置对应轴上的缩放(无单位)
值类型: - 数字:
- 1:保持不变
- 2:放大一倍
- 0.5:缩小一半
- 百分比:不支持百分比
3D缩放 - scale3d
缩放:scale3d(sx, sy,sz)
- 该CSS函数定义了在 3D 空间中调整元素的缩放比例因子 。。
值个数 - 三个值时,表示在 3D 空间之中, sx, sy, sz 分别表示他在三个方向上缩放的向量。
值类型: - sx:是一个< number >代表缩放向量的横坐标。
- sy:是一个< number >表示缩放向量的纵坐标。
- sz:是< number >表示缩放向量的 z 分量的 a。
注意:- scaleX(sx) 等价于scale(sx, 1) 或 scale3d(sx, 1, 1) 。
- scaleY(sy)等价于 scale(1, sy) 或 scale3d(1, sy, 1)。
- scaleZ(sz)等价于 scale3d(1, 1, sz)。
3D空间 - transform-style
变换式:transform-style
- 该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中。
- 在3D空间中同样是可以使用透视效果。
值类型: - flat:指示元素的子元素位于元素本身的平面内。
- preserve-3d:指示元素的子元素应位于 3D 空间中。
<!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: 0;background-image: url(../images/grid.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);}</style>
</head>
<body><div class="box">div<div class="item">10</div></div>
</body>
</html>
3D空间 - 制作正方体
<!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;background-image: url(../images/grid.png);}.box {position: relative;width: 100px;height: 100px;background-color: red;/* 在父元素中添加 transform-style来启用3D空间 */transform-style: preserve-3d;transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(2);}.item {position: absolute;top: 0;left: 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(0deg) translateZ(50px);}.back {background-color: rgba(0, 255, 255, 0.4);transform: rotateY(-180deg) translateZ(50px);}.left {background-color: rgba(255, 255, 0, 0.4);transform: rotateY(-90deg) translateZ(50px);}.right {background-color: rgba(0, 0, 255, 0.4);transform: rotateY(90deg) translateZ(50px);}</style></head><body><!-- 父元素(舞台) --><div class="box">div<!-- 子元素 --><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>
3D背面可见性 - backface-visibility
背面可见性:backface-visibility
- 该CSS 属性 backface-visibility 指定某个元素当背面朝向观察者时是否可见。
值类型: - visible:背面朝向用户时可见。
- hidden:背面朝向用户时不可见。
CSS3动画性能优化
1.创建一个新的渲染层(减少回流)
- 有明确的定位属性(relative、fixed、sticky、absolute)
- 透明度(opacity 小于 1)
- 有 CSS transform 属性(不为 none)
- 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画
- backface-visibility 属性为 hidden
- …
2.创建合成层。合成层会开始GPU加速页面渲染,但不能滥用 - 对 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 等
CSS3-数据可视化相关推荐
- css3制作八棱锥_svg、canvas、css3d实现数据可视化(伪3D效果)
前言: 这次如算上处定面一这我作问汇u应色会进灯样近项目用到了一些自定义的数据可视化组件,我把我做的部分抽出来几个典型功一新说讲为其年次供.发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效做 ...
- 52个实用的数据可视化工具!
来源丨原力大数据 从数据获得信息的最佳方式之一是,通过视觉化方式,快速抓住要点信息.另外,通过视觉化呈现数据,也揭示了令人惊奇的模式和观察结果,是不可能通过简单统计就能显而易见看到的模式和结论. 目前 ...
- 数据可视化(BI报表的开发)第一天
课程回顾: jQuery事件注册: $(元素).click(function () {}); $(元素).on('click', [后代元素], function () {}); $( ...
- 学习笔记之数据可视化(二)——页面布局(中)
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
- 学习笔记之数据可视化(二)——页面布局(上)
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
- 学习笔记之数据可视化(一)——项目适配方案
目录 最终效果展示 1. 数据可视化适配方案 1.1 项目需求 1.2 PC端适配方案 1.3 使用到的技术 2. 数据可视化项目开发 项目准备 1.1 文件准备 1.2 引入js和css文件 1.3 ...
- 55种数据可视化开源工具_8种出色的开源数据可视化工具
55种数据可视化开源工具 数据可视化是获取表格或空间数据并以对人类友好的视觉方式进行传递的机制. 有几种开源工具可以帮助您创建有用的信息图. 在本文中,我们将介绍八个开源的数据可视化工具. 数据包装器 ...
- 推荐30款最佳的数据可视化工具
各个互联网公司通过大量的用户数据.信息进行统计分析,而这些大量繁杂的数据在经过可视化工具处理后,就能以图形化的形式展现在用户面前,清晰直观.随着各种数据的增加,这种可视化工具越来越得到开发者们的欢迎. ...
- 数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)
http://www.cnblogs.com/zhangdi/p/3690284.html?utm_source=tuicool&utm_medium=referral 最近一直在研究数据可视 ...
- 数据可视化——echarts
目录 一.可视化面板介绍 二.可视化库介绍 三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
最新文章
- 简单几行程序轻松分析Excel
- R语言使用ggplot2包geom_jitter()函数绘制分组(strip plot,一维散点图)带状图(单色填充、分组颜色填充)实战
- Download interrupted: URL not found.
- envi反演水质参数_科技前沿基于GOCI静止水色卫星数据的长江口及邻近海域Kd(490)遥感反演及其在机载激光测深预评估中的应用...
- 蒙特卡洛粒子滤波定位算法_ROS -- 最简单的自主ACML定位
- 利用ASP下载远程文件到服务器
- Web API实现微信公众平台开发-服务器验证
- (HY000): Cannot modify @@session.sql_log_bin inside a transaction
- 一位被信息时代遗忘的隐秘天才,一个为人类而战的传奇故事
- 楼市信贷新政力度超市场预期 房企放风要涨价
- 北京大学生物信息学课程(5)
- 百度ai开放平台体验
- .styl格式的CSS样式文件是什么文件
- jpeg格式转pdf格式的简单方法
- 脱光解决方案——一枚大佬一枚白骨精
- axure中图表背影_Axure制作可视化图表的几种方法
- python有n元人民币、其中有10元的_Python笔记-古灵阁小精灵金加隆金币兑换人民币...
- 实现isPrime()函数,参数为整数,要有异常处理,如果整数是质数,输出“是”,如果不是质数,输出“不是”。
- 使用kdevelop出现问题及解决
- php 阿里云短信服务及阿里大鱼实现短信验证码的发送