css 平移到某个位置_Html基本的动画效果（平移，旋转）

在HTML中我们可以自己制作一些有趣的动态动画放入页面，也可以给用户体验增加一点趣味，所以合理的利用css动画效果。

动画                                             1.位置 ：位移 translate(x，y)；

2.大小 ：缩放 scale(xx px)；

1、转化：改变元素的            3.状态：旋转 rotate(xx deg)；

4.形态：skew(xx deg)；

2、转化属性 ：css转化属性 transform : none 不转换/ transform-function;转化函数 如 transform:translate位移(170px);

3、转换原点：transform-origin:       如 transform-origin: 50% 50%；

取值 ：

数值 ：以元素左上方的点为(0,0)，再去计算其他点

百分比:

0% , 0% : 左上方的点

50% ， 50% ：元素的中心点

关键字:

left

right

top

bottom

center

left top : 表示左上方

transform-origin赋值：

一个值 ：x轴的移动

两个值 ：x轴和y轴

三个值 ：x轴，y轴，z轴

过度

动画

css样式

2、2D转换 -位移translate

位移：位置移动

从当前元素的位置处，移动到指定坐标轴位置处

函数：

translate(x,y)

translate(value);

取值：

数值、百分比

去负值

x ：正 向右移动

负 向左移动

y : 正 向下移动

负 向上移动

单方向位移：

translateX(x)

translateY(y)

如： 匀速360logo的平移样式 与各种速度样式的对比图