css3D动画

一、2D与3D坐标系？
- 1.1 2D坐标系
- 1.2 3D坐标系
- 1.3 坐标原点
二、启用3d空间，透视，旋转，平移
- 2.1.x轴旋转：元素向屏幕里面翻转为正
- 2.2.Y轴旋转：元素向屏幕里面翻转为正
- 2.3.Z轴旋转：元素向屏幕里面翻转为正
三、绘制正方体
四、绘制长方体
五、3D背面可见性backface-visibility
六、案例地址（会持续更新）

一、2D与3D坐标系？

坐标系是我们做动画中最重要的东西，我们必须清楚的知道当前元素所在的坐标系，我们才能做出符合我们预期的效果

1.1 2D坐标系

在元素中t添加了transform属性，默认的坐标原点是盒子的正中间，x轴向右为正，y轴向下为正。

1.2 3D坐标系

在元素中t添加了transform属性，默认的坐标原点是盒子的正中间，x轴向右为正，y轴向下为正，z轴朝向我们自己的方向为正。

1.3 坐标原点

默认的坐标原点是元素的正中间，可通过css修改。如：

<!DOCTYPE html>
<html lang="zh-CH">
<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 {padding: 0;margin: 0;}.box {width: 200px;height: 200px;background-color: skyblue;transform: rotate(45deg);transform-origin: 0 0;}</style>
</head>
<body><div class="box">div</div>
</body>
</html>

修改后，坐标原点就变为了0,0点

二、启用3d空间，透视，旋转，平移

2.1.x轴旋转：元素向屏幕里面翻转为正

如图所示：原本子元素是覆盖在父元素上的，当在3d环境中围绕x轴旋转后，子元素就卡在了元素中。（当元素旋转后，坐标轴也会旋转）

<!DOCTYPE html>
<html lang="zh-CH">
<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 {padding: 600px;margin: auto;}.box {position: relative;width: 200px;height: 100px;background-color: skyblue;/* transform-style：写在必须写在父元素上。代表： 在父元素中添加transform-style启用3d空间 */transform-style: preserve-3d;/* 在父元素中添加透视效果 */perspective: 200px;}.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 class="item">10</div></div>
</body>
</html>

2.2.Y轴旋转：元素向屏幕里面翻转为正

如图所示：原本子元素是覆盖在父元素上的，当在3d环境中围绕Y轴旋转后，子元素就卡在了元素中。（当元素旋转后，坐标轴也会旋转）

/* 形变 */transform: rotateY(70deg) translateY(50px);

2.3.Z轴旋转：元素向屏幕里面翻转为正

如图所示：原本子元素是覆盖在父元素上的，当在3d环境中围绕Z轴旋转后，子元素就顺时针旋转。（当元素旋转后，坐标轴也会旋转）

三、绘制正方体

<!DOCTYPE html>
<html lang="zh-CH">
<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 {padding: 600px;margin: auto;}.box {position: relative;width: 200px;height: 200px;background-color: skyblue;/* 在父元素中添加transform-style启用3d空间 */transform-style: preserve-3d;/* 在父元素中添加透视效果 *//* perspective: 200px; */transform: rotateX(-33.5deg) rotateY(45deg);}.item {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.top {background-color: rgba(255, 0, 0, 0.4);transform: rotateX(90deg) translateZ(100px);}.bottom {background-color: rgba(0, 255, 0, 0.4);transform: rotateX(-90deg) translateZ(100px);}.front {background-color: rgba(100, 100, 100, 0.4);transform: rotateY(0deg) translateZ(100px);}.back {background-color: rgba(100, 100, 100, 0.4);transform: rotateY(-180deg) translateZ(100px);}.left {background-color: rgba(255, 255, 0, 0.4);transform: rotateY(-90deg) translateZ(100px);}.right {background-color: rgba(255, 255, 0, 0.4);transform: rotateY(90deg) translateZ(100px);}</style>
</head>
<body><div class="box">父元素<div class="item top">top</div><div class="item bottom">bottom</div><div class="item front">front</div><div class="item back">back</div><div class="item left">left</div><div class="item right">right</div></div>
</body>
</html>

四、绘制长方体

有了上面的正方体，我们如何快速得到一个长方体呢？其实很简单，你可以尝试在父元素中将其他轴进行缩放。如：

.box {// ...transform: rotateX(-33.5deg) rotateY(45deg) scaleX(2);}

.box {// ...transform: rotateX(-33.5deg) rotateY(45deg) scaleY(2);}

.box {// ...transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(2);}

五、3D背面可见性backface-visibility

/* 背面朝向用户时不可见 */
backface-visibility: hidden;
/* 背面朝向用户时可见 */
backface-visibility: visible;

可运行下面的代码观察

<!DOCTYPE html>
<html lang="zh-CH">
<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 {padding: 600px;margin: 0;}.box {position: relative;width: 200px;height: 100px;background-color: skyblue;/* 在父元素中添加透视效果 */perspective: 200px;/* perspective: 50px; */}.item {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;/* 背面朝向用户时不可见 */backface-visibility: hidden;/* 背面朝向用户时可见(默认) *//* backface-visibility: visible; */animation: loop 3s linear infinite;}@keyframes loop {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}</style>
</head>
<body><div class="box">父<div class="item">子</div></div>
</body>
</html>

六、案例地址（会持续更新）

案列地址

可视化系列讲解：css3D：如何绘制正方体，长方体等相关推荐

可视化系列讲解：css2.5D动画-＞帧动画
文章目录一.css属性之帧动画属性(animation) 1.1 @keyframes规则 1.2 animation属性 1.3 复杂一点的2.5D动画二.动画性能优化一.css属性之帧动画属 ...
可视化系列讲解：canvas的动画实现
文章目录一.Canvas动画 1.1 Canvas绘图都是通过JavaScript 去操控的,如要实现一些交互性动画是相当容易的.那Canvas是如何做一些基本动画的? 1.2 Canvas 画出一 ...
echarts数据可视化系列：中国地图绘制
绘制中国地图及相关配置绘制地图有两种方式: 百度地图API(要申请SDK) 矢量地图数据(需要开发者自己获取,我把中国地图各省地图及世界地图的json数据放到百度网盘中,提取码:http) 因为后面 ...
matlab 条形图误差线,数据可视化系列：手把手教你绘制带误差线的条形图
原标题:数据可视化系列:手把手教你绘制带误差线的条形图条形图可以用于展示数据不同分类下的均值.中位数.标准差和置信区间等,Excel可以实现,但对于带误差线的条形图而言,还是比较麻烦的.R语言的基础 ...
《Qt-OpenGL系列编程》课程学习记录（8）：绘制一个长方体
要绘制一个长方体,每一面都是图片. 为了简便,就不使用EBO了. 前面的内容是绘制一个面的,但是长方体有六个面.其实方法也是一样的,根据这个图设置坐标: float vertices[] = {//位 ...
数据可视化系列（一）：Matplotlib初相识
前言期待了好久的datawhale可视化教程终于出来了,这次标题狠有文艺范儿,哈哈哈这次我主要目的是最近要写篇论文,也正好为以后建模画图打捞基础~ 大家可以多看看官方教程: 中文官方网站:http ...
「Python爬虫系列讲解」十四、基于开发者工具 Network 的数据抓包技术
本专栏是以杨秀璋老师爬虫著作<Python网络数据爬取及分析「从入门到精通」>为主线.个人学习理解为主要内容,以学习笔记形式编写的. 本专栏不光是自己的一个学习分享,也希望能给您普及一些关 ...
数据可视化系列（三）：布局格式定方圆
前言期待了好久的datawhale可视化教程终于出来了,这次标题狠有文艺范儿,哈哈哈这次我主要目的是最近要写篇论文,也正好为以后建模画图打劳基础~ 大家可以多看看官方教程: 中文官方网站:http ...
数据可视化系列（二）：艺术画笔见乾坤
前言期待了好久的datawhale可视化教程终于出来了,这次标题狠有文艺范儿,哈哈哈这次我主要目的是最近要写篇论文,也正好为以后建模画图打劳基础~ 大家可以多看看官方教程: 中文官方网站:http ...

可视化系列讲解：css3D：如何绘制正方体，长方体等