先贴几段代码,有时间慢慢研究一下

我又回来了.总结一下

CSS3 2D 转换

CSS3 3D 转换

CSS3 过渡

CSS3 动画

CSS3 2D 转换

2D Transform 方法

transform: translate(50px,100px);

translate(x,y)沿着 X 和 Y 轴移动元素。

translateX(n)沿着 X 轴移动元素。

translateY(n)沿着 Y 轴移动元素。

transform: scale(2,4);缩放转换，改变元素的宽度和高度。

scaleX(n) 缩放转换，改变元素的宽度。

scaleY(n)缩放转换，改变元素的高度。

transform: rotate(30deg);旋转角度。

skew(x-angle,y-angle)倾斜转换，沿着 X 和 Y 轴。

skewX(angle)倾斜转换，沿着 X 轴。

skewY(angle)倾斜转换，沿着 Y 轴。

matrix(n,n,n,n,n,n)方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 3D转换

transform: rotateX(120deg);

transform: rotateY(130deg);

CSS3 过渡

transition

transition:all ease 1s;一秒过渡上面所有的元素

transition:transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 一秒过渡所写元素

CSS3 动画

改变背景色和位置：

animation:myfirst 5s;

animation-iteration-count:3; 播放动画三次

animation-iteration-count:infinite 规定动画应该无限次播放。

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}