「CSS 3D 专题」学习前，你需要搞明白什么是CSS 3D？

前端达人

发布于 2019-08-09 19:38:03

1.3K0

发布于 2019-08-09 19:38:03

文章被收录于专栏：前端达人前端达人

开篇

CSS最令人兴奋的新领域之一莫过于在3D空间操作网页元素，这一新技能给你打开了3D世界的大门，如果你能Get这一项技能，你也能绘制这个真实的世界。CSS 3D 第一次被介绍是在2009年，最早被应用在Safari浏览器。

虽然出现很早，但是从诞生到普及也经历漫长的发展时间，在这过程中难免出现一些不同的比较混乱的认知，以下观点你需要清楚认知：

CSS 3D不是CSS3或HTML5

虽然CSS 3D和这两个术语相关，但实际上不能等同：其规范是CSS Transforms的一部分，CSS Transforms是W3C（万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构）规范的一级目录，和HTML5一点关系都没。由于CSS3这个词太火爆了，以至于css中出现的新玩意，都等同于CSS3。

CSS 3D != WebGL

WebGL是一种与HTML5相关联的高级3D渲染引擎。它是一个使用JavaScript将3D数据“绘制”到<canvas>元素中的API。借助复杂强大的编程语言，WebGL可以创建整个3D世界，并且越来越多的应用于游戏，娱乐，以及更加复杂的动画场景模拟。

相比之下，CSS 3D使用简单的CSS声明转换常规HTML内容元素——位图图像，文本，链接等。

WebGL需要JavaScript进行配合，虽然CSS 3D有时也需要借助JavaScript来增强交互，但两者不能划等号。

CSS 3D 是建立在 2D Transforms 的基础之上

CSS 3D 并不是一个全新的规范，而是在2D Transforms的基础上扩展到了三维。这有助与我们开发者更容易的学习。如果你熟悉 2D Transforms ，那么你学起 CSS 3D 更加简单，只是增加了几个新属性而已，主要是对精度的控制更加细致。

先来看这段我们熟知代码，在二维平面里将图片顺时针旋转45度：

img { transform: rotate(45deg); }

而在CSS 3D世界里，你要有空间感的概念，相同的操作是通过X，Y或Z轴进行旋转的，从而产生了三维视觉效果，因此如果我们可以定义元素绕什么轴进行旋转，如下代码所示，在三维空间里，我们让图片绕y轴旋转45度：

img { transform: rotateY(45deg); }

类似的，CSS 3D动画的实现方式和2D相同，具有transitions和keyframes属性。

第一个例子：美女看过来！

这是本专栏的第一个例子，笔者不展示太复杂的例子，就是倾斜摆放了一张美女照片，效果就是,忍不住的同学估计会移动鼠标，鼠标一经过，美女正好面对着你，是不是很激动，呵呵，示例代码如下：

<!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/

CSS 3D 的兼容性

CSS 3D这么有趣，你一定很关心兼容性如何，笔者查了下，兼容信息如下图，目前主流浏览器都是支持的，除了ie，你可以放心使用：

延伸阅读：三维坐标系

理解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