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()怎麼使用

#

以上是Css3中的transform 漸層屬性怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！