我想要在三维空间中制作动画效果。我知道这可以通过CSS和HTML5实现,但我找不到一个好的、实用的教程!
我发现这个网站是一个例子。你可以选择文本等。一直处于活动状态。 请问有人能够给出一个非常简单易懂的小例子来说明如何实现吗?我看到了源代码,但我并不真正理解它...
这是CSS3还是HTML5,还是两者都包括?
需要多少JavaScript编程知识?
哪些浏览器支持此功能?
我想要在三维空间中制作动画效果。我知道这可以通过CSS和HTML5实现,但我找不到一个好的、实用的教程!
我发现这个网站是一个例子。你可以选择文本等。一直处于活动状态。 请问有人能够给出一个非常简单易懂的小例子来说明如何实现吗?我看到了源代码,但我并不真正理解它...
这是CSS3还是HTML5,还是两者都包括?
需要多少JavaScript编程知识?
哪些浏览器支持此功能?
这有两个部分。
这是一个非常老的答案,我将保留原始内容,只删除不再有效的链接。
但自从我写了这篇文章以来,我的编码能力和浏览器已经进步了,所以如果你想以更高效的方式构建CSS立方体,请查看我在此主题上撰写的文章:
我会详细介绍每一部分,但首先简要回答您最后问的三个问题。
这是CSS3还是HTML5还是两者兼而有之?
需要多少JavaScript?
好吧,如果您不想使用JavaScript创建3D形状本身,则不需要任何JavaScript来对其进行动画处理。任何支持3D变换的浏览器也支持关键帧动画,并且,如果浏览器支持关键帧动画,则可能要使用这些动画而不是jQuery(甚至是您自己的自定义JS)动画。。
哪些浏览器支持此功能?
两年前情况不太好,但现在正在改善...
✓ Chrome, Safari, Firefox(虽然Firefox的3D动画抖动且对我的CPU不友好...我确实有一台6年旧的笔记本电脑,这是真的),Opera 15+ (WebKit) 支持3D变换。当然还有关键帧动画。
Firefox支持所有无前缀的内容,Chrome/Safari/Opera需要使用-webkit-
前缀 - 更新: Chrome 36+ 和 Opera 23+同样支持无前缀的内容,所以现在只有Safari还需要加前缀。我在答案或演示中不会使用任何前缀(-prefix-free
会处理这些)。另一个更新: Safari 9去掉了transforms的前缀。
✗ 在转换为WebKit之前,Opera不支持3D transforms。
✗ IE 9及以下版本不支持3D transforms。IE10和IE11支持3D transforms,但是不支持3D transformed元素的嵌套(不能通过在父级和子级元素上应用3D transforms来创建逼真的3D形状,因为被3D transformed的子元素会被压平到父元素的平面上)。更新: Edge现在支持3D transformed元素的嵌套。
好的,希望这能解决一些问题。现在...
首先,尝试想象一个立方体。也许这个链接有帮助?或者我们也可以在这里放一张图片。
它有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>
首先你需要让这些面具有一定的规律性,使它们具有相等的宽度和高度,并将它们绝对定位,使它们全部垂直叠放在一起,为它们分配不同的背景颜色(它们并不介意),你可以给它们一些边距,加入一些虚拟文本或其他内容...
接下来是有趣的部分:将它们移动以形成一个空间立方体。您可以使用3D变换来实现。
考虑这个三维坐标系:
最初,6个面都恰好位于您看到蓝色正方形的位置,在xOy
平面上(其中O
是3个轴的交点)。
注意y轴
的方向。作为数学背景,这对我来说一开始有点奇怪,但这就是屏幕的坐标系。
在2D中,原点O
位于左上角,所以x轴
的+
(正方向)指向右,而y轴
的+
指向下。
因此,x轴
正值的平移(例如translateX(10px)
)会将应用于其上的元素向右移动(朝向x轴
的+
),而负值的x轴
平移(例如translateX(-10px)
)则向左移动。
同样地,y轴
正值的平移(例如translateY(10px)
)会将元素向下移动(朝向y轴
的+
),而负值的y轴
平移(例如translateY(-10px)
)则向上移动。
现在再添加另一个维度,即z轴
。 z轴
的+
(正方向)是从屏幕外面指向您的方向。因此,沿着z轴
正值的平移(例如translateZ(10px)
)会将元素向前移动(朝向z轴
和您的方向的+
),而沿着z轴
负值的平移(例如translateZ(-10px)
)则向后移动(远离您)。
正角度值的旋转(例如rotate(15deg)
- 注意如果没有指定旋转轴,则默认为z轴
)在CSS中是顺时针方向的,负角度值的旋转(如rotate(-15deg)
)是逆时针方向的。
顺时针意味着从您旋转元素的轴的+
方向看去是顺时针旋转的。
因此,围绕x轴
的正旋转意味着从x轴
的+
方向看,它在yOz平面
中顺时针旋转,x轴
位于右侧。
围绕y轴
的正旋转意味着从y轴
的+
方向看,它在zOx平面
(水平平面)中顺时针旋转,y轴
位于底部。
围绕z轴
的正旋转意味着从z轴
的+
方向看,它在xOy平面
(屏幕平面)中顺时针旋转,这是您自然看到屏幕的方式。
这意味着将其沿z轴
正方向向前移动。这是什么?是正值的translateZ
。要使用多少值?嗯,它应该是宽度
的一半(或高度
,不要紧,它们相等)。
假设我有width: 16em;
那么在这种情况下,您需要将面向前(沿着正z轴
)移动16em/2 = 8em
。在CSS中,它是:
.face:nth-child(1) { transform: translateZ(8em); }
注意: translate
变换会移动整个被变换元素的坐标系(因此,后续变换的 transform-origin
也随之移动)。
这很简单,对吧?只需要沿着 z 轴
反方向平移同样的距离就好了。如下所示:.face:nth-child(2) { transform: translateZ(
。是这样吗?-8em
); }
嗯...实际上,只有当你不想在该面上放置任何内容时,或者当你不想将一个有左右区分的背景图像作为其背景时,才是这样。
每个构成立方体的正方形都有一个正面和一个反面。正面朝向 z 轴
的正方向;即从电脑屏幕“看向你”的一面。如果在正面放置文本,它将正常流动。但是在背面上,看起来会垂直镜像。
这就是为什么你首先应该做的事情是将第二个正方形绕垂直轴(y 轴
)旋转 180°。这样做后,你可以将这个第二个正方形沿着 z 轴
平移以将其移动到背面。
在这种情况下,平移值再次为正。就像 translate
变换会移动被变换元素的坐标系一样,rotate
变换则可以旋转它。这意味着,在应用了 rotateY(180deg)
后,z 轴
的+
指向背面(而不是前面)。
因此,将第二个面旋转并平移到立方体上正确位置的 CSS 是:
.face:nth-child(2) { transform: rotateY(180deg) translateZ(8em); }
注意:方块是一个非常简单的3D形状,但我觉得一个非常有用的CSS属性来检查我是否正确旋转了面部是backface-visibility
。如果我设置它为hidden
并且我看不到旋转的元素,那么这意味着我正在从后面观察它。
首先,它的正面必须“朝向”右侧。这意味着它必须围绕y轴
旋转,以使z轴
的+
指向右侧,然后必须沿着正的z轴
移动相同的正值(在这种情况下为8em
),这是正方形边长的一半。
旋转多少度?嗯,90°,这意味着所需的CSS是:
.face:nth-child(3) { transform: rotateY(90deg) translateZ(8em); }
首先将它以90°
旋转,但是反方向,使其正面“看向”左侧。 “反方向”意味着使用rotateY(-90deg)
,然后应用相同的旧的translateZ(8em)
。一行CSS代码实现:
.face:nth-child(4) { transform: rotateY(-90deg) translateZ(8em); }
先绕着x轴
旋转90°
,然后沿着z轴
平移(旋转后指向上方)。CSS:
.face:nth-child(5) { transform: rotateX(90deg) translateZ(8em); }
将它沿着x轴
反方向旋转90°
,然后沿着z轴
平移(在旋转后指向下方)。CSS:
.face:nth-child(6) { transform: rotateX(-90deg) translateZ(8em); }
立方体的各个面现在已经就位。但是,如果更接近你的面看起来比更远的面大,它就不会像一个3D形状那样看起来。处理这个问题的CSS属性叫做 perspective
,并应用于对它们进行了3D变换的元素的父级。
如果你垂直于前面的中心观察,它仍然不会像一个3D形状。因为你看不到其他的面。解决这个问题,需要将立方体本身在3D空间中旋转。这就是为什么浏览器允许嵌套3D变换元素的重要性。
使用transform-style: preserve-3d;
启用3D变换元素的嵌套(在此示例中为.cube
的父元素)。不幸的是,IE10/11不支持preserve-3d
值的transform-style
属性(只支持flat
值),因此你不能在IE中拥有一个逼真的立方体(除非你将应用在立方体上的3D变换链接在每个面变换之前,这意味着如果你想将整个立方体作为一个整体进行动画,则需要为每个面设置一组关键帧)。
更新:transform-style:preserve-3d
现在也可以在IE中使用了。
注意:如果你还在.cube
上应用了3D变换,则应该将perspective
属性移到.cube
的父级上。
这只是使用.cube
元素的常规关键帧动画完成的。假设你想将其旋转:
@keyframes ani { to { transform: rotate3d(5, 12, 13, 360deg); } }
您可以拥有多个关键帧,旋转围绕不同的轴,但这是基本思想。
这全部是由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取决于您想如何实现它。 它可以是“很多”或“很少”。
浏览器越现代,运行得越好。 在这里查看哪些浏览器支持什么。