css 3d动画_CSS 3D动画简介

css 3d动画

A simple 3D transform (hover to see animation)

一个简单的3D变换(悬停以查看动画)

One of the most exciting new areas of CSS is the ability to manipulate web page elements in 3D space. Originally proposed by the Webkit development team, the specification for CSS 3D is now supported on all modern browsers.

CSS最令人兴奋的新领域之一是能够在3D空间中操纵网页元素。 由Webkit开发团队最初提出，现在所有现代浏览器都支持CSS 3D规范。

Inevitably web developer’s excitement is mixed with a degree of confusion; many are under some serious misapprehensions in regards to CSS 3D:

Web开发人员的兴奋不可避免地混杂着某种程度的困惑； 许多人在关于CSS 3D方面存在严重的误解：

CSS 3D转换不是CSS3或HTML5 (CSS 3D Transforms are not CSS3 or HTML5)

While the technology tends to be associated with both terms, 3D Transforms are actually neither: the spec is part of CSS Transforms, which is its own Level 1 W3C Module, and has nothing to do with HTML5.

尽管该技术往往与这两个术语相关联，但3D转换实际上却并非两者都：该规范是CSS转换的一部分，而CSS转换是它自己的1级W3C模块，与HTML5无关。

Unfortunately “CSS3” has become a synonym for “new and shiny on the web”, to the point that it’s now marketing rather than a practical term of reference.

不幸的是，“ CSS3”已经成为“网络上崭新的光泽”的代名词，以至于它现在只是营销，而不是实际的职责范围。

CSS 3D！= WebGL (CSS 3D != WebGL)

WebGL is an advanced 3D shader that is associated with HTML5. It is an API that uses JavaScript to “paint” 3D data into the rectangular context of the <canvas> element. With the power of a complex programming language, WebGL can create entire 3D worlds, and is increasingly being used for games, entertainment, sophisticated animations and simulations.

WebGL是与HTML5关联的高级3D着色器。 它是一个使用JavaScript将3D数据“绘制”到<canvas>元素的矩形上下文中的API。 借助复杂的编程语言，WebGL可以创建整个3D世界，并且正越来越多地用于游戏，娱乐，复杂的动画和模拟。

In contrast, CSS 3D transforms regular HTML content – bitmap images, headings, links, etc – with simple CSS declarations.

相反，CSS 3D使用简单CSS声明转换常规HTML内容-位图图像，标题，链接等。

requires JavaScript. While the same language can be used to enhance CSS 3D, the two don’t have to be paired together.

需要 JavaScript。 虽然可以使用相同的语言来增强CSS 3D，但不必将两者结合在一起。

CSS 3D基于2D变换 (CSS 3D builds on 2D Transforms)

Rather than creating a completely new reference, the writers of the CSS 3D Transforms simply extended 2D Transforms into the third dimension. This makes learning the specification much easier; if you’re familiar with 2D Transforms, it’s relatively simple to take on 3D. There are fewer than half a dozen new properties; the major thing to keep in mind is an increased demand for exactitude.

CSS 3D变换的作者并没有创建一个全新的参考，而是将2D变换扩展到了三维。 这使学习规范变得容易得多。 如果您熟悉2D变换，则使用3D相对简单。 仅有不到六个新物业； 要记住的主要事情是对精确性的需求增加。

For example, take the following declaration:

例如，采用以下声明：

img { transform: rotate(43deg); }

In the context of 2D transforms, the CSS above can only be interpreted one way: as the clockwise rotation of an image relative to the viewer. In CSS 3D, the same rotation could be through X, Y or Z axes, providing very different visual results. As a result, we would usually need to specify which axes we wish to turn on in 3D:

在2D变换的上下文中，只能以一种方式解释以上CSS：作为图像相对于查看者的顺时针旋转。 在CSS 3D中，可以通过X，Y或Z轴进行相同的旋转，从而提供非常不同的视觉效果。 因此，我们通常需要指定要在3D模式下打开的轴：

img { transform: rotateY(43deg); }

Similarly, CSS 3D animations use the same syntax as 2D animations, with the same ability to hook into transitions and keyframes.

同样，CSS 3D动画使用与2D动画相同的语法，并具有插入过渡和关键帧的能力。

尚未在所有浏览器中锁定CSS 3D支持 (CSS 3D Support Is Not Yet Locked Down Across All Browsers)

Support for CSS 3D Transforms is at much the same level as 2D transforms was several years ago: while all modern browsers support the feature – even IE 10 (at least partially) – Webkit still requires prefixes for some properties, and interpretation still differs across vendors in some edge cases.

对CSS 3D转换的支持与几年前的2D转换处于几乎相同的水平：尽管所有现代浏览器都支持该功能-甚至包括IE 10(至少部分支持)-Webkit仍然需要某些属性的前缀，并且各个供应商的解释仍然不同在某些情况下。

In articles to come, I’ll talk much more about the particulars of CSS 3D and solutions to those inconsistencies, illustrated with some tutorials.

在接下来的文章中，我将更多地讨论CSS 3D的细节以及这些不一致的解决方案，并通过一些教程进行了说明。

翻译自: https://thenewcode.com/645/Introduction-to-CSS-3D-Animation

css 3d动画