使用 CSS3 创建旋转的 3D 立方体 - 文章教程

使用 CSS3 创建旋转的 3D 立方体

发布于 2018-01-15 字数 4300 浏览 2274 评论 0

CSS3 创建 3D 立方体特效,这个效果的 CSS 已成为多年来最炫的技术,从简单的颜色和尺寸到深刻的语言指令,创意的视觉效果。 添加动画和你有真正漂亮的东西。不幸的是,每个立方体 CSS 教程我看有点长,一个混合的视觉风格与立方体的基本知识,所以我决定写一篇文章,只提供了基本的细节需要创建一个 CSS 3D 动画。

使用 CSS3 创建旋转的 3D 立方体

演示地址:http://run.wenjiangs.com/code/#/?code=ZEtSta23

<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;
}

现在只有一个面将显示在任何给定的时间。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论