CSS3中transform移动属性的使用

问题？CSS3中transform移动属性的使用

原理：该属性是将原来存在的元素发生位置的变化，包括旋转角度，水平，垂直位置的变化。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

例子：

#div1{
width: 200px;
height: 200px;
background-color: blue;
/* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/
transition: all 2s ease 0s;
}
#div1:hover{
background-color: green;
width: 0px;
height: 0px;
border-radius: 50%;
box-shadow: 2px 2px 2px black;
/*transform:旋转属性(度数)
translateX:移动属性*/
transform: rotate(30deg) translateX(500px) translateY(50px);
}

由上例可以看出，transform的作用。当然联合过渡属性来做，效果相对好一点儿。