css3

 

CSS3中提供了2D和3D两种变换方式，所谓的变换主要就是位移和旋转，2D和3D的区别大概就是有没有Z轴方向的变换，仅此而已。

所以，为了后面更好的理解3D变换，我们先说一说2D的变换。

translate()和rotate()
上面两种方法是2D变换的常用方法，一个对应位移，一个对应旋转，当然还有其他的，这里就不展开，先只说说这两个。具体语法是这样的，比如我们想变换一个div。

#div1{transform:translate(100px,100px);}
#div2{transform:rotate(50deg);}
transform是css3提供的一个属性，专门用于图形变换，这个属性现在可能得到了大部分浏览器的支持，但3D效果用到的后面几种属性，还是需要做兼容，为了节省时间，讨论技术本身，后面就不照顾兼容了。

言归正传，上面两个方法光从参数也很容易理解，translate()是位移方法，分别朝x轴方向，y轴方向移动一段距离，距离可以为负。rotate()是旋转方法，会绕原点顺时针旋转一个角度。那么问题来了，原点在哪？既然是变换，必须得有参考系，这才有准确的变换效果，所以，无论2D还是3D，找准坐标系，找准坐标系，找准坐标系。因为很重要，所以说三遍。

一般来说，原点默认为元素中心点，当然这个原点也是可以调整的，通过这个属性 transform-origin:50% 50%; 这里的50% 50%表示的就是中心默认的位置，可以改成其他的，比如说左上角就应该写成 tansform-origin:0% 0%;  这样就可以调整原点了。