专栏首页前端达人「CSS 3D 专题」学习前,你需要搞明白什么是CSS 3D?

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

开篇

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度:

img { transform: rotate(45deg); }

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

img { transform: rotateY(45deg); }

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

04

第一个例子:美女看过来!

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

<!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款前端热门工具(下)

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java8新特性:默认方法详解

    Java8 中的默认方法是针对接口添加的新特性,它是指接口可以直接对方法进行实现,实现方式很简单,直接在方法定义处添加 default 关键字即可,如下所示。

    南风
  • LeetCode 138:复制带随机指针的链表 Copy List with Random Pointer

    给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点。

    爱写bug
  • 你必须收藏的 GitHub 技巧

    来 源:cnblogs.com/iamzhanglei/p/6177961.html

    好好学java
  • Java描述设计模式(05):原型模式

    知了一笑
  • 轻松getHadoop大数据开发技术,这一篇文章够了

    Hadoop是一个开源框架,可编写和运行分布式应用处理大规模数据。分布式计算是一个宽泛并且不断变化的领域。

    牛油果
  • Vue博客实战---前后端环境搭建

    最近心血来潮在开发个人博客网站,刚好可以趁这个机会出一个系列文章讲讲前端界面的设计,后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vu...

    逆月翎
  • JavaScript入门篇

    快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScri...

    达达前端
  • GraphQL快速入门教程

    传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。graphQL提供一种全新数据查询...

    Fundebug
  • 深入理解class的继承,助你成为优秀的前端

    Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

    前端老鸟
  • ​promise源码详解,助力你轻松掌握promise

    在没有出来promise之前,为了拿到函数的回调结果,我们不得不使用callback function,这种代码的维护和理解是相当恶心了!

    前端老鸟

扫码关注云+社区

领取腾讯云代金券