web前端入门到实战：CSS动画之旋转魔方轮播_前端实现环形的旋转轮播

下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果。

总的来说我们需要实现以下两个主要功能：

• 构建一个能够旋转的立方体

• 让立方体拥有基本轮播所具有的特性

但在完成以上两点之前我们需要再次了解或熟悉一下实现其功能的CSS3基础知识点：

1. transition

2. transform

3. perspective

4. preserve-3d

5. animation

transition属性 — 过渡效果

transition: property duration timing-fucntion delay;

1
2

这个属性应该都很熟悉, 也不过多讲, 只是列出其所具有的所有子属性。

过渡属性 — 过渡持续时间 — 过渡函数(曲线) — 过渡延迟

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out; 原生具有的基本过渡函数

1
2

transform属性 — 对元素进行2D或3D转换

它有几个常用的变换方法：scale scale3d translate translate3d rotate rotate3d 等。

transform-origin: x-axis y-axis z-axis;  设置旋转元素的基点位置

transform-style: preserve-3d; 让转换的子元素保留3D转换(与perspective搭配使用)

1
2
3
4

perspective属性 — 让元素实现3D透视效果

perspective: 1000px;
    它有两种写法    
transform: perspective(1000px);  

1
2
3
4

这个属性让物体具有立体的3D透视效果, 值越大物体离此时我们的眼睛看到屏幕里物体的距离就越远, 相反若它的值越小, 离我们的视角就越近, 即在屏幕中显示的大小就越大。它和preserve-3d共同使用在需要实现3D效果的父元素上搭建舞台视角, 让其子元素能够实现真正的3D转换。

一个基本的立方体就需要结合以上三点属性来实现。

Cube

<div class="cube-wrap">
    <div class="cube">
        <div class="cube-face front"><img src="1.jpg"></div>
        <div class="cube-face back"><img src="2.jpg"></div>
        <div class="cube-face left"><img src="3.jpg"></div>
        <div class="cube-face right"><img src="4.jpg"></div>
        <div class="cube-face top"><img src="5.jpg"></div>
        <div class="cube-face bottom"><img src="6.jpg"></div>
    </div>
</div>
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
1
2
3
4
5
6
7
8
9
10
11

重要的CSS样式

.cube-wrap{
    width: 300px;
    height: 300px;
    perspective: 1000px;
    position: relative;
}
.cube-wrap .cube{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all .5s ease
1
2
3
4
5
6
7
8
9
10
11