CSS最令人兴奋的新领域之一莫过于在3D空间操作网页元素，这一新技能给你打开了3D世界的大门，如果你能Get这一项技能，你也能绘制这个真实的世界。CSS 3D 第一次被介绍是在2009年，最早被应用在Safari浏览器。
虽然出现很早，但是从诞生到普及也经历漫长的发展时间，在这过程中难免出现一些不同的比较混乱的认知，以下观点你需要清楚认知：
01
CSS 3D不是CSS3或HTML5
虽然CSS 3D和这两个术语相关，但实际上不能等同：其规范是CSS Transforms的一部分，CSS Transforms是W3C（万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构）规范的一级目录，和HTML5一点关系都没。由于CSS3这个词太火爆了，以至于css中出现的新玩意，都等同于CSS3。
02
CSS 3D != WebGL
WebGL是一种与HTML5相关联的高级3D渲染引擎。它是一个使用JavaScript将3D数据“绘制”到<canvas>元素中的API。借助复杂强大的编程语言，WebGL可以创建整个3D世界，并且越来越多的应用于游戏，娱乐，以及更加复杂的动画场景模拟。
相比之下，CSS 3D使用简单的CSS声明转换常规HTML内容元素——位图图像，文本，链接等。
WebGL需要JavaScript进行配合，虽然CSS 3D有时也需要借助JavaScript来增强交互，但两者不能划等号。
03
CSS 3D 是建立在 2D Transforms 的基础之上
CSS 3D 并不是一个全新的规范，而是在2D Transforms的基础上扩展到了三维。这有助与我们开发者更容易的学习。如果你熟悉 2D Transforms ，那么你学起 CSS 3D 更加简单，只是增加了几个新属性而已，主要是对精度的控制更加细致。
先来看这段我们熟知代码，在二维平面里将图片顺时针旋转45度：
代码语言：javascript复制img { transform: rotate(45deg); }而在CSS 3D世界里，你要有空间感的概念，相同的操作是通过X，Y或Z轴进行旋转的，从而产生了三维视觉效果，因此如果我们可以定义元素绕什么轴进行旋转，如下代码所示，在三维空间里，我们让图片绕y轴旋转45度：
代码语言：javascript复制img { transform: rotateY(45deg); }类似的，CSS 3D动画的实现方式和2D相同，具有transitions和keyframes属性。
04
第一个例子：美女看过来！
这是本专栏的第一个例子，笔者不展示太复杂的例子，就是倾斜摆放了一张美女照片，效果就是,忍不住的同学估计会移动鼠标，鼠标一经过，美女正好面对着你，是不是很激动，呵呵，示例代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端达人示例——美女看过来</title>
<style>
body {
background-color: #333333;
}
.photo{
margin: 0 auto;
perspective : 1000px;
overflow: hidden;
width: 700px;
padding: 80px 0;
display: flex;
align-items: center;
justify-content:center;
box-sizing: border-box;
}
.photo img {
width: 400px;
transform: rotateY(-45deg);
transition: .5s all linear;
box-shadow: 0 0 5px 10px rgba(255,255,255,0.1);
}
.photo img:hover {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="photo">
<img src="girl.jpg" alt="beautiful Girl">
</div>
</body>
</html>上述代码里的perspective（视域）这个属性我需要强调下， 这个属性很关键，去掉了这个属性，你将看不到上述的 3D 效果，这个属性到底什么意思，下一章节我将会详细介绍，敬请期待...
本示例你可以访问这个链接进行体验：https://www.qianduandaren.com/demo/css3d/01/
05
CSS 3D 的兼容性
CSS 3D这么有趣，你一定很关心兼容性如何，笔者查了下，兼容信息如下图，目前主流浏览器都是支持的，除了ie，你可以放心使用：
06
延伸阅读：三维坐标系
理解CSS 3D，了解坐标系十分重要。所谓的三维坐标，就是在二维的基础上，添加第三个坐标轴——Z轴而已。Z轴的具体方向在哪，目前还没有统一的标准。目前有两个标准：左手系统和右手系统。
伸出你的右手，弯曲你的无名指和小拇指，让大拇指指向右方（X轴的正方向），并且让食指指向上方（Y轴的正方向），那你会发现中指指向屏幕的外部（Z轴的正方向）。如果用左手做同样的事情，让左大拇指指向右方（X轴的正方向），食指向上（Y轴的正方向），那么你的中指指向屏幕的内部（左手系统中Z轴的正方向）。一般的选择右手系统，原因有以下几点：
- 它是传统数学中采用的坐标系
- 它是大多数开发人员采用的坐标系
- 它是OPENGL中采用的坐标系
在CSS的坐标系里，需要强调一下，y轴的正方向是向下的，X轴的正方向是向右的，Z轴的正方向指向自己。如下图所示为CSS中的3D坐标系:
有了坐标系系统，我们可以用（x，y，z）来表示三维空间的任意一个位置。
本篇的章节就到这里，我们一起学习了什么是CSS 3D，有了更正确的认知，接着我们一起做了一个简单例子，对CSS 3D有了直观的认识，最后我们了解CSS 3D的兼容性，知道了在目前主流浏览器里，我们可以放心大胆的进行使用。下一章节，笔者将带着大家了CSS 3D中的一个重要属性——perspective（视域），敬请期待...
精彩推荐
JS小技巧丨随机不重复的ID、模板标签替换、XML与字符串互转、快速取整
css实用手册丨CSS 垂直居中的七种方法，值得收藏
Web Animation API丨用原生JS制作一个图片随机移动的动画
十款热门的Vue.js工具和库
vue基础丨新手入门篇（一）
小技巧丨console的用法，不仅仅只有console.log()
动画基础丨点和直线
太惊艳了，这些画都是CSS的杰作！
css基础丨Transforms 属性在实际项目中如何应用？
css基础丨如何理解transform的matrix()用法
css基础丨如何理解Display的属性：None，Block，Inline，Inline-Block
ES6基础丨let和作用域
ES6基础丨const介绍
ES6基础丨默认参数值
ES6基础丨展开语法（Spread syntax）
ES6基础丨解构赋值（destructuring assignment）
ES6基础丨箭头函数（Arrow functions）
ES6基础丨模板字符串（Template String）
ES6基础丨Set与WeakSet
ES6基础丨Map与WeakMap
ES6基础丨Symbol介绍：独一无二的值
ES6基础丨Object的新方法
ES6基础丨迭代器（iterator）
ES6基础丨生成器（Generator）
ES6基础丨你需要知道的Array数组新方法（上）
数据结构基础丨栈简介（使用ES6）
数据结构基础丨队列简介（使用ES6）
JavaScript基础丨前端不懂它，会再多框架也不过只是会用而已！
JavaScript基础丨你真的了解JavaScript吗?
JavaScript基础丨回调(callback)是什么?
JavaScript基础丨Promise使用指南
JavaScript基础丨深入学习async/await
JS加载慢？谷歌大神带你飞!(文末送电子书)
19年你应该关注这50款前端热门工具（上）
19年你应该关注这50款前端热门工具（中）
19年你应该关注这50款前端热门工具（下）
