CSS 3D动画,怎么样？

Question

我想在3D空间中制作动画.我知道这可以用CSS和HTML5,但我找不到一个实用的好教程!

我发现这个网站就是一个例子.您可以随时选择文本等.有人可以给出一个非常容易理解的小例子吗？我看到源代码,但我真的不明白它...

这是CSS3还是HTML5或两者兼而有之？

我需要多少JavaScript？

哪些浏览器支持这个？

Answer 1

这有两个部分.

1. 第一个是关于构建 3D形状.
2. 第二个涉及动画(这是简单的部分).

我将详细介绍其中的每一个,但首先我将简要回答你最后提出的三个问题.

这是css3还是html5还是两者兼而有之？

这是CSS3.CSS 3D变换和关键帧动画.

我需要多少JavaScript？

好吧,如果您不想使用JavaScript创建3D形状,那么您不需要任何JavaScript来为其设置动画.任何支持3D变换的浏览器也支持关键帧动画,如果浏览器支持关键帧动画,那么你可能想要使用那些而不是jQuery(甚至可能是你自己的自定义JS)动画.

哪些浏览器支持这个？

两年前事情看起来不太好,但是他们变得越来越好......

✓的Chrome,Safari浏览器,火狐(Firefox中虽然3D动画是不平稳的,而不是很高兴我的CPU ......我有一个6岁的旧笔记本电脑,这是真的)歌剧15+(WebKit的)支持3D变换.当然还有关键帧动画.

Firefox支持所有未加前缀的内容,Chrome/Safari/Opera需要-webkit-前缀 - 更新:Chrome 36+和Opera 23+也支持它们没有前缀,所以它现在只剩下Safari了.我不会在答案或演示中使用任何前缀(-prefix-free处理那里的事情).另一个更新:Safari 9前缀变换.

✗ 3D转换没有被支持的歌剧切换到WebKit的前.

✗IE9(包括9)不支持3D变换.IE10和IE11支持3D变换,但不支持3D变换元素的嵌套(无法通过在父元素和子元素上应用3D变换来创建逼真的3D形状,因为3D变换后的父元素的3D变换子元素变平到了平面中.父母).更新:Edge现在支持嵌入3D转换元素.

好吧,我希望清除一些东西.现在...

1构建CSS多维数据集.

1.2什么是立方体,从HTML开始

首先,尝试画一个立方体.也许这个链接有帮助？或者我们这里也有一张图片.

它有6个方面.1个顶部,1个底部; 前面1个,后面1个; 1左,1右.这意味着HTML只是:

<ul class='cube'>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
    <li class='face'></li>
</ul>

你先放一些规律性入面,给他们平等的 width和height,他们绝对定位,让他们都在一个叠在另一个上面,给他们不同的背景,他们不介意.你可以给它们一些填充,把一些虚拟文本放进去,不管......

现在出现了一个有趣的部分:移动它们以便它们在空间中形成立方体.你可以使用3D变换来做到这一点.

1.2协调系统

考虑这个3D坐标系:

最初,所有6个面都是您在xOy平面中看到蓝色正方形的位置(在O3个轴的交点处).

注意方向y-axis.来自数学背景,这对我来说似乎有点奇怪,但这就是坐标系对于屏幕的看法.

在2D中,原点O位于左上角,所以+在(正方向),x-axis点右边和+中的y-axis百分点.

1.2.a沿轴的翻译

因此,沿着x-axis(例如,translateX(10px))将正值的平移移动到它所应用的元素的右侧(朝向+的x-axis),而沿着x-axis(类似的translateX(-10px))的负值的平移将其移动到左侧.

类似地,沿着y-axis(像translateY(10px))的正值的平移将元素向下移动(朝向+的y-axis),而沿着y-axis(类似translateY(-10px))的负值的平移将其向上移动.

现在添加另一个维度.随着z-axis.屏幕上的+(正方向)出现在z-axis你面前.所以沿着正值的翻译z-axis(像translateZ(10px))向前移动的元素(朝+的z-axis朝你),而负值的翻译沿z-axis(像translateZ(-10px))向后(远离您)移动它.

1.2.b围绕轴旋转

正角度值的旋转(例如,rotate(15deg)- 注意,如果没有指定旋转轴,则假定它是z-axis)在CSS中是顺时针方向,负角度值(例如rotate(-15deg))的旋转是逆时针方向.

顺时针方向是顺时针方向,从+您旋转元素的轴周围看.

因此,围绕正旋转x-axis手段在顺时针旋转yOz plane从看到+的x-axis,这是在正确的.

围绕正旋转y-axis装置在顺时针旋转zOx plane(水平平面)从看到+的y-axis,这是在底部.

各地正旋转z-axis方式在顺时针旋转xOy plane从看到(屏幕面)+的z-axis,这是你如何自然地看清屏幕.

1.3将面放在正确的位置以形成立方体

1.3.1将一面放在前面

这意味着沿着它向前(沿正方向)进行翻译z-axis.这是什么？一个translateZ正值的.有什么价值？好吧,它应该是一半width(或者height,无关紧要,它是一个正方形,它们是相等的).

假设我有 width: 16em;

然后在这种情况下,您将面向前(沿正面z-axis)平移16em/2 = 8em.在CSS中,那是

.face:nth-child(1) { transform: translateZ(8em); }

注意:translate transform会移动已转换元素的整个坐标系(因此,transform-origin对于任何后续转换).

1.3.2将第二张脸放在后面

那很简单,对吧？只是沿着z-axis相反方向的相同值转换,对吗？, 对？.face:nth-child(2) { transform: translateZ(-8em); }

嗯...实际上...只有当你不想在那张脸上放任何内容时.或者,如果你不想将一个重要的图像作为背景,哪个是重要的,哪个是正确的.

构成立方体的每个方格都有正面和背面.正面朝向正方向z-axis; 那个"从电脑屏幕上看着你"的那个.如果你把文字放在那里,它会在正面流动.但它看起来在背面垂直镜像.

这就是为什么你应该做的第一件事是围绕垂直轴旋转第二个方形面180°(y-axis).在这样做之后,你可以沿着z-axis它转换第二个方形面,以便将它移动到后面.

在这种情况下,翻译值再次为正.就像translate transform 会移动被翻译元素的坐标系一样,旋转transform......好吧...... 旋转它.这意味着在rotateY(180deg)施加之后,朝向后面+的z-axis点(不再朝向前方).

因此,旋转然后将第二个面转换为其在多维数据集上的位置的CSS是:

.face:nth-child(2) { transform: rotateY(180deg) translateZ(8em); }

注意:立方体是一个非常简单的3D形状,但我发现一个CSS属性对于检查我是否以正确的方式旋转面部非常有用backface-visibility.如果我将它设置为hidden并且我没有看到旋转的元素,则意味着我从后面看它.

1.3.3将第三张脸放在右边

首先,它的前方必须"向右看".这意味着,它具有围绕要旋转的y-axis,使得+所述的z-axis端部向上指向右边,然后它必须沿正被翻译的z-axis由相同的正值(8em在这种情况下),其一侧的长度的一半广场.

旋转了什么角度？好吧,90°,这意味着所需的CSS是:

.face:nth-child(3) { transform: rotateY(90deg) translateZ(8em); }

1.3.4将第四张脸放在左边

首先旋转它90°,但另一方面,使其前面"看起来"向左."另一种方式"意味着rotateY(-90deg),然后应用相同的旧translateZ(8em).在一个CSS行中:

.face:nth-child(4) { transform: rotateY(-90deg) translateZ(8em); }

1.3.5将第五张脸放在顶部

首先通过旋转它90°周围x-axis,然后沿着翻译z-axis(其中旋转后点了).CSS:

.face:nth-child(5) { transform: rotateX(90deg) translateZ(8em); }

1.3.6将第六个(和最后一个!)面放在顶部

通过90°相反的方式旋转它x-axis,然后沿着它z-axis(在旋转后指向下方)进行平移.CSS:

.face:nth-child(6) { transform: rotateX(-90deg) translateZ(8em); }

1.4透视和逼真的3D形状

立方体的所有面都已到位.但这看起来不像3D形状,除非更接近的面看起来比那些更远的面更大.调用它的CSS属性被调用perspective,并应用于对其应用3D变换的元素的父元素.

如果你看起来垂直于正面的中心,它仍然看起来不像3D形状,因为你不会看到任何其他面.要解决此问题,您需要在3D中旋转立方体.这就是为什么浏览器允许嵌套3D转换元素的重要性.

您可以transform-style: preserve-3d;在父元素(.cube在本例中)中启用3D变换元素的嵌套.遗憾的是,IE10/11不支持该属性的preserve-3d值transform-style(仅支持该flat值),因此您无法在IE中拥有逼真的立方体(除非您在立方体上应用3D变换并在应用变换之前将它们链接起来)每个面,这意味着如果要为整个多维数据集设置动画,每个面的一组关键帧).

更新:transform-style: preserve-3d现在登陆IE也是如此.

注意:如果您还在其上应用3D变换.cube,那么您应该perspective在该父项上移动该属性.cube.

2动画CSS多维数据集

这只是使用.cube元素的常规关键帧动画完成的.假设您要旋转它:

@keyframes ani { to { transform: rotate3d(5, 12, 13, 360deg); } }

你可以有多个关键帧,围绕不同的轴旋转,但这是基本的想法.

TL; DR

请给我该死的演示!好的,这是:

简单的旋转立方体演示

还有一些我最近完成的演示,并展示了如何创建其他稍微复杂的3D形状:

❆ 方反棱镜

❆ 立方八面体

❆ 菱形八面体

❆ 菱形十二面体

❆ 八面体

❆ 截断的立方体

Answer 2

全部都是 css3 和 javascript。只需在您最喜欢的检查器中检查站点，深入 dom，您就会看到类似的内容

-webkit-perspective: none;
-webkit-perspective-origin: 200px 200px;
-webkit-transform: matrix3d(-0.9386958080415784, -0.197569680458564, 0.2825179663820851, 0, 0, 0.8194947008605812, 0.5730867606754029, 0, -0.34474654452969944, 0.537954139890128, -0.7692562404101148, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 16s;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;

您需要多少 JavaScript 取决于您想要如何实现它。它可以是“很多”或“一点”。

浏览器越现代，更改后的运行效果就越好。请在此处查看哪些浏览器支持哪些浏览器。