Css3中的transform 漸層屬性怎麼使用

我們知道translate元素是讓元素從當前位置移動，根據我們給定的座標來進行位移，下面就給大家詳細的解讀一下translate，以及做一個小案例協助大家理解，一起來看一下。

translate()素從其當前位置移動，根據給定的left（x 座標） 和 top（y 座標）

translate(x,y)定義2d轉換 xy為數字 x正為右 負為左 y正為下 負為上

translate3d(x,y,z)定義3D轉換

scale()方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數

scale(x,y)定義2D轉換 x y 為倍數

scale(2,4)把寬度轉換為原始大小的 2 倍，把高度轉換為原始高度的 4 倍

rotate()方法 素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉

rotate(30deg)表示旋轉30度

matrix()方法

skew(x-angle,y-angle)定義 2D 傾斜轉換，沿著 X 和 Y 軸。

transition過渡屬性transition-property 屬性規定應用過渡效果的 CSS 屬性的名稱 比如：width

transition-property: none|all|property;

transition-duration屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。

transition-timing-function屬性規定過渡效果的速度曲線。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n); ease：規定慢速開始，然後變快

transition-delay 屬性規定過渡效果何時開始。

例子：

div{width:100px;height:100px;background:blue;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3關於translate屬性的詳細介紹

CSS3關於background-size屬性的詳細介紹

CSS3函數rotate()怎麼使用