1.介绍
在css3中新加了一些3d特效，如translate3d,scale3d，rotate3d，与css3中的2d特效最大的区别就是多了个z轴，因此才有了3d效果。因为scale3d(x,y,z)等价于scaleX(x),scaleY(y),scaleZ(z)分别对x，y, z坐标值进行缩放，比较容易理解，translate3d平移也是类似，比较简单，这里就不就介绍了，详细请参考http://www.w3school.com.cn/或菜鸟教程等网站。
本文主要详细介绍不大容易理解的rotate3d属性，
2.代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #p1{ perspective: 500px; } #p2 { width: 200px; height: 200px; margin: 250px auto; background: black; transition: 1s; font-size: 50px; color: white; } #p2:hover { transform: rotate3d(20, 0, 0, 45deg); } </style></head><body><div id="p1"> <p id="p2">df</p></div></body></html>perspective是透视距，写在父元素，以获得更好的3d效果，transition是过渡时间，transform是样式转换。
通过总结：发现rotate3d(20,0,0,45deg)，其实就是从原点指向(20,0,0)这个点构成一个方向轴，然后根据左手定则，四指指向方向为旋转方向，旋转45度。因此这样就很好解释了rotate3d（x,y,z,deg）属性，由原点指向(x,y,z)成方向轴，然后左手定则，确定旋转方向，进行相应的角度旋转，得到特效结果。
注释：
css3里的3d坐标轴：z轴垂直电脑屏幕指向你，y轴在电脑屏幕垂直朝下，x轴在电脑屏幕水平向右
左手定则：类似物理当中的左手定则，大拇指指向旋转方向轴正方向，四指环绕紧握，四指指向为元素旋转方向
旋转原点：一般指向元素正中心，当然你可以设定旋转元素上设置样式transform-origin进行相应更改