迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

近最在更新CSS3 3D的相关技术文章。得到了很多粉丝的关注，有粉丝私信我让我出一期有关3D幻灯片的分享。呐，这不就来了吗？

本章目标：

1. 3D幻灯片的基本布局
2. 3D幻灯片产生的问题和解决方案
3. 完整的3D幻灯片的制作

老规矩，我们先来看今天要实现的效果吧！

这种效果在网上也很常见，不知道大家是否用的时候是直接用别人的插件，那么今天我就来剖析一下这其中的原理。

这不就是把一张图片分割成N份嘛，然后然后将每一块贴上不同位置的背景图片，不同的是，这个是将4张图片分别贴在了一个长方开的盒子的上下前后四个面上了。所以呢？这个3D幻灯片的本质就是画N个长方体的盒子。

那么看过我之前的文章 CSS3专题(二)—如果再有人说CSS3只能做立方体请拿这篇文章怼回去 就知道，要制作出一个长方形的盒子，我们只需要通过 translateZ和rotateX就可以实现了。

好了，接下来我们开始一步步的实现它吧

基础布局

我们先来画一个盒子看下。

我在box下一个item类的div，用来制作其中的一个盒子，里面有4个A标签，这个用来作幻灯片的超链接，两个span做为盒子的左右两个面。

我们轮播图片的宽高为(800*448)

先将外面的box设置成3D空间，使其内部的子元素随父级的3D变换而变换。每一个小的盒子也是一个单位的3D空间。里面的span a 标签均为绝对定位。

设置好基础样式后，再来针对每一个页面设置不同的背景图片和transform值。我们知道高是448，所以我们的tarnalateZ为224px;

左右两个span面的分别用浅灰色来填充。

继续跟着上下前后四个面进行不同的背景图片的定位

这里面我们分割成20分，每一份就是40px。现在的效果是这样的

接下来我们让他转起来看效果吧：

可以看到，前后上面四个面均已被填充上背景图片了。^_^

然后我们再来复制3个盒子看下效果

整个盒子的布局基本上完成了。

如果说，20个面我们一个的去复制，那么维护起来就相当麻烦了，也没有必要，所以我们这时候就要通过js去动态生成dom结构和样式了。

动态生成dom结构和样式

然后按照前面的样式，生成对应的样式表，创建style标签，然后追加到head中去

现在的效果是这样的：

可以看到，我们的dom结构和css样式都已经成功生成 。

幻灯片的切换

从gif图可以看出来，是每一个盒子在运动，它们运动的时间相同，通过不同的动画延迟形成错落的动画。当我们点击上一张的时候，旋转是从右往左开始的，所以我们只需要将延迟时间倒过来即可。我是定义了两个类来控制他们的运动方式。

我的设置是每一个盒子之间的动画延迟相隔70ms。

然后我们给两个按钮各自绑定点击事件。获取到所有的盒子，让每一个盒子每次绕X轴旋转90deg,并且加上延迟时间的class

到这里，我们的效果已经封装完成了。

效果是这样的：

从图上可以看到，每一个盒子之间有一丝细小的间隙，为什么会出现这样的问题。我们来分析一下，我们在创建盒子的时候，我们对每一个盒子进行了translateZ(224px)，也就是说，此时我们将每个小盒子都放大了。这是导致间隙的根本原因。

那怎么解决呢？这个也好办，我们将他们的父级 .box 的div，向里平移224px，即：设置

transform: translateZ(-224px);

所以我们还要保证.box的父级也是一个3D空间。所以我们设置body的样式：transform-style: preserve-3d;perspective:800px;

我们将景深设置到box的父级body中去了。

一般来说，幻灯片都有一个自动切换的功能，我这没有做，我把上一张下一张逻辑做出来了，定时器就不写了，你们有兴起自己动手去试试吧！

总结：

1）3D幻灯片的基础布局其中由很多个小盒子拼凑成的。然后通过针对每个盒子进行旋转，并设置他们的延迟时间间隔相同即可。

2）设置了translateZ后，整个小盒子都会被放大，要想保持原有的大小，我们需要将父级向里平移相等的距离。

这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……

未完待续。。。