css3中有translate,rotate,scale,skew,等属性值，但是这些属性值都需要写在trasnform中，
例如：
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????#demo{
???????????width: 200px;
???????????height: 200px;
???????????background-color: red;
???????????transition: all 1s;//此处加一个过度效果，能够更加形象，但是transtion属性放在hover和hover之前是有不同的效果，可以自己试试
???????}
???????#demo:hover{
???????????-webkit-transform: translate(100px,50px);
???????????-moz-transform: translate(100px,50px);
???????????-ms-transform: translate(100px,50px);
???????????-o-transform: translate(100px,50px);
???????????transform: translate(100px,50px);
???????}
???</style>
</head>
<body>
<div id="demo">
???
</div>
</body>
</html>
translate:里面第一个值为横向移动，当这个值为负值时则是向左移动，正值时则是向右移动，同理，第二个值也类似。
rotate：带有单位为deg的值，整数位顺时针旋转，负数为逆时针旋转。
scale:有两个值，分别为x轴方向和y轴方向，大于1时为放大，小于1时为缩小，为负数时反转，在放大该数值的绝对值的倍数，比如-3，先反转，在放大倍；
css中的动画animate
首先：要创建一个动画
@keyframes animateName {
???0%{
???????width: 100px;//定义起始状态
???}
//中间可以添加若干个帧数
???100%{
???????width: 500px;//定义结尾状态
???}
}
然后：引用动画
需要都用到animation这个属性animation: animateName 5s ease 1s infinite alternate;
animation里面有很多属性值,第一个为引用的动画名，第二个动画执行时间，第三个为执行曲线即是否匀速之类的，第四个为延迟执行时间，第五个为执行的次数，infinite为无限次，第六个为动画执行的方式，normal、alternate分别代表正常播放和轮流反方向播放
css3中的2d转换效果和动画
原文地址：http://www.cnblogs.com/mark20170707/p/7464958.html