网站的动画效果

在网站中可以通过css中的transform和transition来完成一些鼠标划入的动画效果，让页面具有一定的交互性，突出具体内容。

其中transform可以使元素进行移动(translate)、旋转(rotate)、缩放(scale)或倾斜(skew)，如果要同时使用多个变化要使用空格隔开例如：

transform: translate(100px, 100px) scale(1.1); 延x，y轴位移100px，同时放大1.1倍。

同时移动，缩放和倾斜都可以设置具体的x轴或y轴，例如：

transform: translateX(100px); 延x轴位移100px，y轴不变。

transform: scaleX(1.1); 依中心点为基点延x轴放大。

同时可以使用transform-origin来改变元素的基点，transform进行的rotate，translate，scale，skew，等操作都是以元素自己中心位置进行变化，而transform-origin可以使元素基点不在是中心位置，以达到你需要的基点位置。但transform-origin不是transform的属性，但和其他css3属性一样都要考虑到兼容性的问题。

ttransition则是用来设置动画的完成时间和过渡方式的，也可以设置延时和具体某一个css属性的动画时间。