CSS3 创建 3D 立方体特效,这个效果的 CSS 已成为多年来最炫的技术,从简单的颜色和尺寸到深刻的语言指令,创意的视觉效果。 添加动画和你有真正漂亮的东西。不幸的是,每个立方体 CSS 教程我看有点长,一个混合的视觉风格与立方体的基本知识,所以我决定写一篇文章,只提供了基本的细节需要创建一个 CSS 3D 动画。
- <div>
- <div>
- <div>front</div>
- <div>back</div>
- <div>top</div>
- <div>bottom</div>
- <div>left</div>
- <div>right</div>
- </div>
- </div>
立方体的每个面都有它自己的元素。 你可以想象,我们将 CSS 的每一面拿出来放在适当的位置。
让我们一次把这一有意义的点。 具有重要意义的第一要素是整个动画的包装,这将提供一个 CSS 的视角为 3D 元素:
- .wrap {
- perspective: 800px;
- perspective-origin: 50% 100px;
- }
CSS 视角的概念很难解释,但 MDN 做了伟大的工作,所以我会重复他们的解释。为了更好地理解的角度来看,我建议修改的角度看它如何影响性能演示。 接下来是集装箱将所有不同的立方体的面:
- .cube {
- position: relative;
- width: 200px;
- transform-style: preserve-3d;
- }
多维数据集将是 200 像素宽,相对定位、绝对定位面将保持在一定范围内。 我们也会使用 preserve-3d 保持元件的三维和不平坦的。 之前的任何特定面的规则,将有一些一般性的方式,将适用于每一面:
- .cube div {
- position: absolute;
- width: 200px;
- height: 200px;
- }
位置和尺寸的面,我们可以开始创建个人面临转型的代码:
- .back {
- transform: translateZ(-100px) rotateY(180deg);
- }
- .right {
- transform: rotateY(-270deg) translateX(100px);
- transform-origin: top right;
- }
- .left {
- transform: rotateY(270deg) translateX(-100px);
- transform-origin: center left;
- }
- .top {
- transform: rotateX(-90deg) translateY(-100px);
- transform-origin: top center;
- }
- .bottom {
- transform: rotateX(90deg) translateY(100px);
- transform-origin: bottom center;
- }
- .front {
- transform: translateZ(100px);
- }
该 rotatey 值的旋转移动面对面显示文本在正确的角度,而 translatez 设置移动向前和向后的堆栈内的元素。 translatey 设置可能是混乱的,但请注意,这是提高或降低一脸显示 3D 效果通过透明玻璃。 每个面都有自己的翻译设置放在适当的地方,以便随时修改这些值,为什么每个对应于它的面。
当然没有什么好动画设置 3D 元素。 所以这里有几个步骤,我们需要使我们的宝贵的立方体动画水平:
- @keyframes spin {
- from { transform: rotateY(0); }
- to { transform: rotateY(360deg); }
- }
-
- .cube {
- animation: spin 5s infinite linear;
- }
可能比你想象的要容易,文本看起来是正确的,因为面对旋转我们实现了最初,我用关键帧动画的情况下,我们希望在将来添加更多的特性。
旋转的立方体垂直应简单需要改变动画的 Y 轴,不幸的是,窗格会显示为文本的落后在某些情况下,我们需要修改一些元件的旋转:
- @keyframes spin-vertical {
- from { transform: rotateX(0); }
- to { transform: rotateX(-360deg); }
- }
-
- .cube-wrap.vertical .cube {
- margin: 0 auto; /* keeps the cube centered */
-
- transform-origin: 0 100px;
- animation: spin-vertical 5s infinite linear;
- }
-
- .cube-wrap.vertical .top {
- transform: rotateX(-270deg) translateY(-100px);
- }
-
- .cube-wrap.vertical .back {
- transform: translateZ(-100px) rotateX(180deg);
- }
-
- .cube-wrap.vertical .bottom {
- transform: rotateX(-90deg) translateY(100px);
- }
删除多维数据集的三维看,只显示一次一块(没有其他的脸暗示),从包装中取出的视角和起源的设置:
- .wrap {
- /* no more perspective */
- perspective: none;
- perspective-origin: 0 0;
- }
现在只有一个面将显示在任何给定的时间。