css3 transfrom总结和小实践

一个好的网页最重要的就是它的实用性和美观性，实用性是最重要的自然不必说，美观性也绝对不能少。实现同一个功能，一个网站背景全白很朴实布局不协调，另一个网站看起来清新舒适摆放合理，在大多情况下明显后者就更好。而css动画化相关的知识就是网页美化的重要部分。在课堂上老师所讲的并不完全并且当时也没时间去测试。这儿我以做一个平行四边形按钮并且保持内容不变为例来讲我对css部分知识的理解（涉及了transform的讲解，animation我会分开说）。

transform就是对图形的变换，在动画操作中经常要用，它有以下三种主要用法：

translate（水平方向移动x,垂直方向移动y），

rotate(按自定以的中心点旋转的度数，单位deg，顺时针)，

scale(水平方向缩放的倍数,垂直方向缩放的倍数)。

transfrom使用起来较为简单，但也相对的只用transfrom也只能实现基本效果，在使用它之前，要先注意避开一些坑（我都遇到过）：

1.旋转操作中可以通过transform-origin: x y设置旋转中心点（默认是50%，50%，这里的百分比是指行，宽所占整体的百分比）设置的时候x,y可以是百分比，像素或者方位名词。

2.尽量避免在同一个标签里多次使用tranfrom，后面的一个trasfrom会抵消前面的效果！原因在于每一个trasfrom都是以元素的初始形态为基准的。要避免这种情况，可以在一个trasfrom用空格写出多次变换的内容，如下代码实现右移300px：

transform: translate(150p