纯CSS3超酷3D旋转立方体动画特效

PetitQ 图片/图形 2019-1-19 2.53K 0 1

这是一款效果非常炫酷的纯 CSS3 3D 旋转立方体动画特效。该 3D 立方体使用 CSS3 perspective 制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼。使用 CSS3 来制作动画效果已经成为 WEB 前端开发的一种时尚，从简单的颜色和尺寸动画，到复杂的旋转、翻转动画， CSS3 展现了它无穷的魅力。使用 CSS 来制作立方体动画，代码简洁易懂，效果更是令人惊叹！下面来看看制作方法。

HTML 结构

立方体结构中，使用一个 wrapper div 来包裹立方体。在里面使用 6 个 div 来制作立方体的 6 个面。

也想出现在这里？联系我们吧

```
<div class="wrap">
```
```
    <div class="cube">
```
```
        <div class="front">front</div>
```
```
        <div class="back">back</div>
```
```
        <div class="top">top</div>
```

        <div class="bottom">bottom</div>

```
        <div class="left">left</div>
```
```
        <div class="right">right</div>
```
```
    </div>
```
```
</div>
```

立方体的每一个面都有它自己的元素。我们稍后会使用 CSS 来将立方体的 6 个面放置到正确的位置上。

CSS 样式

在立方体的 CSS 样式中，首先要关注的是立方体的 wrapper div。为了制作 3D 效果，我们需要为它提供一个 CSS perspective 属性。

```
.wrap {
```
```
    perspective: 800px;
```
```
    perspective-origin: 50% 100px;
```
```
}
```

CSS perspective 属性是一个比较复杂的 CSS3 属性。最好的理解它的方法是看完文档后，自己动手修改一下 DEMO 中的 perspective 属性来看看它的变化。下面需要给包含立方体 6 个面的立方体的容器.cube 提供样式：

```
.cube {
```
```
    position: relative;
```
```
    width: 200px;
```
```
    transform-style: preserve-3d;
```
```
}
```

给立方体容器 200 像素的宽度，并设置为相对定位，这样在它里面的立方体的 6 个面可以设置为绝对定位。preserve-3d 属性确保所有 6 个面都处于 3D 立体状态。在为 6 个面设置它们的位置之前，先给它们一些通用的样式：

```
.cube div {
```
```
    position: absolute;
```
```
    width: 200px;
```
```
    height: 200px;
```
```
}
```

在进过上面对立方体 6 个面的一系列设置之后，现在我们可以为 6 个面制作变形效果，以使它们组装为一个立方体。

```
.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 效果。每一个面都有自己的 translations 值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。

水平旋转立方体

该效果是 DEMO1 中的第一种效果。我们使用关键帧技术来使立方体在水平方向上旋转：

```
@keyframes spin {
```
```
    from { transform: rotateY(0); }
```
```
    to { transform: rotateY(360deg); }
```
```
}
```
```
 
```
```
.cube {
```
```
    animation: spin 5s infinite linear;
```
```
}
```

是不是比想象中的要简单得多？6 个面上的文字在立方体旋转时都处于正确的位置上。使用关键帧可以制作出许多神奇的动画效果。

垂直旋转立方体

该效果是 DEMO1 中的第二种效果。要在垂直方向上旋转立方体只需要简单的改变动画的旋转轴为 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);

```
}
```

扁平旋转立方体

该效果是 DEMO1 中的第三种效果。该效果中移除了立方体的 3D 效果，每次只显示一个面。要做到只一点，我们可以从 wrapper 中移除 perspective 和原点的设置：

```
.wrap {
```
```
    /* no more perspective */
```
```
    perspective: none;
```
```
    perspective-origin: 0 0;
```
```
}
```

现在立方体每次只会显示一个面。

纯 CSS3 超酷 3D 旋转立方体动画特效

已有 633 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

纯CSS3超酷3D旋转立方体动画特效

HTML 结构

CSS 样式

水平旋转立方体

垂直旋转立方体

扁平旋转立方体

纯 CSS3 超酷 3D 旋转立方体动画特效

相关文章

CSS3炫酷页面预加载loading动画特效

3D翻转切换图片展示jQuery插件

AnimateSprite 可控制雪碧图（sprites）动画jQuery插件

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

水平旋转立方体

垂直旋转立方体

扁平旋转立方体

纯 CSS3 超酷 3D 旋转立方体动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复