前端：3D立方体旋转轮播图特效（上）

前端轮播特效随着时代的发展，有着许多绚丽多彩的轮播特效，本次文章主要介绍一下如何制作3D立方体旋转轮播图切换特效，让轮播图的切换变得绚丽多彩。

下图是完成后的效果图

一、首先编写一个html结构

二、编写css样式

1、先构建一个banner容器样式

@charset "UTF-8";----编码格式声明

效果图：

一个居中的banner容器大小就写好了，接下来是书写四个li元素的样式

2、banner-item的样式

效果图：

使用浮动的方式，使四个li元素浮动起来，挤在同一行，并平分父级的宽度。因为父级元素的宽度为800px，在这里设li元素的宽度为200px。

ps：浮动后的元素会使元素向上浮动半级，会造成父级元素塌陷，需要清除浮动带来的影响。

清除浮动的常用方式，在浮动元素的父级元素上添加一个.clearfix的类名，通过伪元素来清除浮动带来的影响

3、给每个li元素里的div元素添加样式

效果图：

给每个div元素添加绝对定位是为了构成一个立方体，利用transform来变化四个div的位置，从而构成一个立方体

立方体的构造图图示：

4、给banner-cude的父元素样式类名banner-item添加相对定位的样式，然后利用transform变换div的位置

(1)首先屏蔽另外三个li元素，只使用一个li元素，先构造一个立方体

(2)编写div的样式，利用css3的:nth-child()选择器

效果图：

5、将注释的另外三个li元素放出来，效果图如下：

6、给banner容器添加一个鼠标移入，li元素发生变换的样式

代码图：

效果图：

这个效果与预期的效果不一样，我们需要的li元素有间隔性变化，而且是在同一个平面中轴转动。

修改代码：

给每个变化的li元素添加一个动画延迟时间，使其出现延迟变化；把整个banner容器往Z轴下拉一半的高度像素，再给每个li元素里的div元素在Z轴方向上往外拉一半的高度像素，使容器的选择在页面的平面上进行。

效果图：

7、给每个li元素里的div添加背景图片，并控制背景图片的位置

代码：

效果图：

ps：给最后一个li元素添加z-index: -1;的样式，可以消除最后一个元素不美观

ps：旋转180deg后，后面的图片是倒转的，给li元素的最后一个div元素添加上rotateX(180deg)，使图片反转过来便可解决

到这里，基本上的样式和html结构已经写好了

html结构全部代码图：

css样式的全部代码图：

最终效果图：

写到这里，所有的代码都是html和css构成的，没有js部分，下一个文章，将开始讲解如何使用js来使这个轮播特效动起来，实现轮播的效果。