注：本篇文章是笔者，刚接触CSS时所写，一些理解或是解释可能有错，希望大家指正讨论共同进步。
刚开始写网页时总会有很多困难，其中用CSS来实现简单的特效，便是难点之一，当然所有的难点共同之处便是，一次性出现过多的新名词导致无从下手。而这次便是分享一下用CSS的写特效时所用的一些属性。
当然用CSS3写特效之前要准备好一些提前工作：
- div盒模型的了解
- position 的relative absolute两种基本布局理解
- top left……定位的使用
- 比较好的3D想象力和一般的计算能力
- 景深 transform transition animation @keyframes几个属性的了解
首先前三年点是基础中的基础，如果连前面三点都不太了解的话，不要说3D的特效了，很可能连简单的放置元素块都是问题。所以一定要好好的理解练习前三点的内容
第四点……既然是3D吗，就没什么好说的。高中计算几何图形的边啥的算是派上用场了
第五点……是写好3D特效的重中之重。那么有多么重要呢？接下来会进行介绍
现在开始进入正题“如何去写一个翻滚的3D特效”，当然在写之前想给大家推荐一个博客，虽然这个博客没有将太多的知识但是胜在有可以直接用的“正方体翻滚”的源码，因为从源码开始一步步的自我分析才是学习最好的方法。
http://www.cnblogs.com/yanchenghui/p/8250724.html。
首先我要做的是一个三棱柱，当然只有侧面。我们可以假设这个三棱柱的高为200px上下边长为110px。并确定三个面分别为黑色 黄色 蓝色
从上面看的效果就是……
就是这样…… 
之后我们开始分析一下制作这样的三棱柱要几个面，根据我的个人习惯如果有有N个面就至少有(N+1)个div。
为什么要多出来一个div呢？
我们可以这么理解，旋转的时候，我们有两种写法，一个是给三个面一面一个旋转的方式，另一个是把这三个面放到一个div里，这样只旋转外面的div从而来动三个面的转动，很明显后者写的就方便很多，而且之后的修改也会比较简单。
对应代码为：
<body>
<div class="main">
<div class="qian"></div>
<div class="zuo"></div>
<div class="you"></div>
</div>
</body>名字怎么好记怎么来。
对于这行代码来说那个main就相当于一个大盒子，里面装了3个面“qian”、“zuo”、“you”黑、蓝、黄
写完之后，第一个问题就来了，因为默认布局问题，这三个面是竖直排列，为了让这三个面形成一个三棱柱，我们要先将三个面重叠排放，之后再将黄面和蓝面按照几何的方法向内折叠与黑面形成封闭的三个面。
对应的代码为
.qian,
.zuo,
.you {
position: absolute;
width: 100%;
height: 100%;
}
/*黑色不需要旋转较度*/
.qian {
background-color: black;
}
/*补充一个有关旋转的知识点
如：transform: rotateY(-60deg)
的旋转方向是 旋转轴左边向外 右边向内 转60°；
transform: rotateY(60deg);
的旋转方向是 旋转轴左边向内 右边向外 转60°；*/
.you {
/*将旋转轴Y轴定位到该元素的最左边*/
transform-origin: left;
/*设置元素旋转角度*/
transform: rotateY(-60deg);
background-color: yellow
}
.zuo {
/*将旋转轴Y轴定位到该元素的最右边*/
transform-origin: right;
/*设置元素旋转角度*/
transform: rotateY(60deg);
background-color: blue
}至于各属性的注释已经标上了。这样这个三棱柱的初始值就完成了。
接下来就是要让它动起来~~~
正如我之前所说的由于“main“div的存在。我们可以通过给它定义好动画属性，让整个三棱柱动起来。首先分析旋转的方式，本例的旋转特效是不带停顿的一直转，而且是每2秒转一圈。
所以这就要用到了transform transition animation @keyframes这几个属性。
我先谈谈我对着几个属性的理解：
- transform 用于设定元素的位置（旋转、缩放、移动或倾斜），也是用来规定旋转方式是2D还是3D的
- transition 用于设置变化过程的方式（时间，快慢，出发时间等）
- animation 用于将编写好的动画和div绑定 本身主要起连接作用 也可以实现部分transition的功能如设置时间等。
- @keyframes 是动画方法主体，transform 就可以用在这里 一般定义方式为@keyframes name {} name就是这一动画的名字。
现在开始写动画，而动画则是写在@keyframes 对应代码为：
@keyframes a {
/*n%就是指动画的时间段
0%指开始 33.3%就是指动画的1/3时
如总时间为9s 33.3%指的是第3秒 66.6%为第6秒*/
0% {
transform: rotateY(0deg)
}
33.3% {
transform: rotateY(120deg)
}
66.6% {
transform: rotateY(240deg)
}
100% {
transform: rotateY(360deg)
}
}这样旋转的动画就写完了，之后该去控制这个动画的播放时间和次数，而这时就要要用到transition或是animation ，我一般倾向使用animation __因为它可以一次将播放的动画、时间、次数等元素设置好。__当然也不要忘了设置旋转方式为3d.并且这块的代码是放在main元素里的，代码为：
.main {
position: relative;
top: 200px;
left: 200px;
width: 220px;
height: 300px;
/*设置转轴 为三棱柱的中心*/
transform-origin: center center 63.6px;
/*设置旋转的方式为3D*/
transform-style: preserve-3d;
/*a为keyframes动画的名字 3s即动画播一次要三秒
linear指播放速度平滑 infinite无限播放*/
animation: a 3s linear infinite;
}如果想要更深的了解各个属性的用法可以自行百度拓展
如果你看到这里，那么恭喜你的三棱柱就可以动起来了。如果想学跟多的复杂的特效，可以在这种方法和代码上延申、优化。等到实习掌握之后，希望大家可以写出自己想要的3D特效。
本文所用的代码经过组合可以直接使用，大家可以进行测试，欢迎讨论指正
PS:由于没有设置景深的原因，其实这个转动时类似于这个三棱柱的投影的旋转，可以理解为是正面直视旋转所出来的翻滚动画
