CSS3新特性2D、3D效果讲解

　希望这篇博客可以对你有所帮助，如果有什么技术上的问题，希望我们可以做进一步的交流，如果你觉得我哪里阐述的不正确或者你有更好的更透彻的理解，也可以联系我，我在这里随时等着你。

　　对于css/html是每个前端必经之路，之前我们可以只是简单用css去做一些静态的界面布局，需要动画效果还是需要js的帮助才可以，但自从出现css3新标签后，一些简单的动态效果我们不需要依靠js就可以完成，这大大提升了我们的工作效率，减少代码量，下面介绍几个css3新标签：

　　2D转换：

　　transform:translate(x,y)根据顶部位置给定的参数，从当前的元素位置移动。

1. 在translate中角度的单位为deg；
2. 旋转轴为x与Y轴；
3. 正值为顺时针旋转，负值为逆时针旋转。
4. 下面是translate属性值：

　　　　

3D转换：

　　与2D转换有所不同的是，3D转换多了Z轴，也是在当前位置上进行移动。

1. 在transforms中角度的单位为deg；
2. 旋转轴为x轴、Y轴和Z轴；
3. 正值为顺时针旋转，负值为逆时针旋转。
4. 下面是transforms属性值：

　浏览器前缀

1. 谷歌：-webkit
2. 火狐：-moz
3. IE:-ms
4. opera：-o

代码展示

不同浏览器会有不同的前缀，要灵活运用，我们像这样去嵌套代码，就可以实现2D或3D效果，在这里没办法一一列举，如果你感兴趣，可以自己试试，以便日后更好的应用。