之前学习 react+webpack ，偶然路过 webpack 官网 ，看到顶部的 LOGO ，就很感兴趣。
最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。
先上 demo ，没有将精力放在兼容上，请用 chrome 打开。
本文完整的代码，以及更多的 CSS3 效果，在我github上可以看到，也希望大家可以点个 star。
嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会）
立方体 3D 旋转
可能上面的效果对精通 CSS3 的而言小菜一碟，写本文的目的也是我自己学习积累的一个过程，感兴趣的就可以一起往下看啦。
其实 CSS3 效果真的很强大，上面的效果都是纯 CSS 实现，个人感觉越是深入 CSS 的学习，越是觉得自己不懂 CSS ，不过话说回来，这些效果的实用场景不大，但是作为一个有追求的前端，我觉得还是有必要去好好了解一下这些属性。
所以本文接下来要讲的大概有：
transform-style:preserve-3d三维效果perspective andperspective-origin 3D视距，透视/景深效果CSS3filter CSS3滤镜transparent、radial-gradient 透明与渐变transform-style
要利用 CSS3 实现 3D 的效果，最主要的就是借助transform-style 属性。transform-style 只有两个值可以选择：
</div>- // 语法：
- transform-style: flat|preserve-3d;
- transform-style: flat; // 默认，子元素将不保留其 3D 位置
- transform-style: preserve-3d; // 子元素将保留其 3D 位置。
当我们指定一个容器的transform-style 的属性值为preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。
当父元素设置了 transform-style:preserve-3d 后，就可以对子元素进行 3D 变形操作了，3D 变形和2D 变形一样可以，使用 transform 属性来设置，或者可以通过制定的函数或者通过三维矩阵来对元素变型操作：
1、使用translateX(length) 、translateY(length) 、 translateZ(length) 来进行 3D 位移操作，与 2D 操作一样，对元素进行位移操作，也可以合并为translate3d(x,y,z) 这种写法；
2、使用scaleX() 、scaleY() 、scaleY() 来进行3D 缩放操作，也可以合并为 scale3d(number,number,number)这种写法；
3、使用rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来进行 3D 旋转操作，也可以合并为rotate3d(Xangle,Yangle,Zangle) 这种写法。
对于 API 的学习，我建议去源头看看，不要满足于消费别人的总结，transform-style API。
这里要特别提出的，3D 坐标轴，所谓的绕 X、Y、Z 轴的三个轴，这个不难，感觉空间想象困难的，照着 API 试试，绕每个轴都转一下就明白了：
了解过后，那么依靠上面所说的，其实我们就已经可以做一个立方体出来了。所谓实践出真知，下面就看看该如何一步步得到一个立方体。
1、准备六个正方形
这个好理解，正方体六个面，首先用 div 做出 6 个面，包裹在同一个父级容器下面，父级容器设置transform-style:preserve-3d ，这样接下来就可以对 6 个面进行 3D 变换操作，为了方便演示，我用 6 个颜色不一样的面：
上面的图是示意有 6 个面，当然我们要把 6 个正方形 div 设置为绝对定位，重叠叠在一起，那么应该是这样的，只能看到一个面：
2、父容器做简单的变换
为了最后的看上去的效果好看，我们需要先对父容器进行变换，运用上面说的rotate 属性，将容器的角度改变一下：
</div>- .cube-container{
- -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
- transform: rotateX(-33.5deg) rotateY(45deg);
- }
那么，变换之后，得到这样一个图形：
嗯，这个时候，6 个 div 面仍然是重叠在一起的。
3、对每个面做 3D 变换
接下来就是对每个面进行 3D 变换了，运用 rotate 可以对div 平面进行旋转，运用 translate 可以对 div 平面进行平移，而且要记住现在我们是在三维空间内变换，转啊转啊，我们可能会得到这样的形状：
算好旋转角度和偏移距离，最后上面的 6 个面就可以完美拼成一个立方体咯！为了效果更好，我给每个面增加一些透明度，最后得到一个完整的立方体：
为了更有立体感，我们可以调整父容器的旋转角度，旋转看上去更立体的角度:
至此，一个 3D 立方体就完成了。写这篇文章的时候，本来到这里，这一块应该就结束了，但是写到这里的时候，突然突发奇想，既然正方体可以（正六面体），那么正四面体，正八面体甚至球体应该也能做出来吧？
嗯，没有按住躁动的心，立马动手尝试了一番，最后做出了下面的两个：
就不再详细讨论如何一步一步得到这两个了，有兴趣的可以去我的 github 上看看源码，或者直接和我讨论交流，简单的谈谈思路：
正四面体
和正方体一样，我们首先要准备 4 个三角形（下面会详细讲如何利用 CSS3 制作一个三角形 div），注意 4 个三角形应该是重叠在一起的，然后将其中三个分别沿着三条边的中心点旋转 70.5 度（正四面体临面夹角），就可以得到一个正四面体。
注意沿着三条边的中心点旋转 70.5 度这句话，意思是每个图形要定位一次旋转中心，也就是transform-origin 属性，它允许我们设置旋转元素的基点位置。
球体
上面的 GIF 图因为添加了 animation 动画效果，看上去很像一个球体在运动，其实只用了 4 个 div，每个 div 利用 border-radius:100% 设置为圆形，然后以中心点为基准，每个圆形 div 绕 Y 轴旋转不同的角度，再让整个圆形容器绕 Y 轴动起来，就可以得到这样一个效果了。
perspective andperspective-origin 3D视距，透视/景深效果
继续说 3D ，接下来要说的属性是 persepective 和 perspective-origin 。
persepective
CSS Code