css3的动画属性（tranform）

tranform的属性一般加在class类名中，只需要添加或者删除类名来实现动画的效果

1.移动的动画属性

transform: translateX(500px);//是在X轴方向上移动500px
transform: translateY(500px);//是在y轴方向上移动500px
//符合属性的写法
transform: translate(100px,50px);//在x轴移动100px,在y轴移动50px

2.缩放的动画属性

//缩放的数值 最大是1，最小是0 
transform: scale(1,0.5);//在x长轴不变，y轴缩小到原来的一半

3.旋转的动画属性

//属性值为0到 360度
rotate: 45deg;//在元素的中心点旋转45度

4.过度效果

//设置过渡效果在 0.5秒内完成，然后背景色改变在0.5秒内
transition: transform 0.5s ease, background 1s ease 0.5s;

//在改变的类名中写效果，就是要实现的效果
background: wheat;//背景色改变为 wheat
transform: translate3d(200px,0,0);//平移200px