先貼幾段代碼,有時間慢慢研究一下

我又回來了.總結一下

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 過渡transitiontransition: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;}}