在前端開發(fā)中，我們常常用到CSS中的transform與transition，那他們的具體用法有哪些呢？今天就和大家分享一二。

　　transform：轉(zhuǎn)換

　　對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

　　方法：translate():

　　元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left(x 坐標(biāo)) 和 top(y 坐標(biāo)) 位置參數(shù)

　　有兩個(gè)div，它們的css樣式如下：

　　.before {

　　width: 70px;

　　height: 70px;

　　background-color: #8fbc8f;

　　}

　　.after {

　　width: 70px;

　　height: 70px;

　　background-color: #ffe4c4;

　　-webkit-transform: translate(50px, 30px);

　　-moz-transform: translate(50px, 30px);

　　-ms-transform: translate(50px, 30px);

　　-o-transform: translate(50px, 30px);

　　transform: translate(50px, 30px);

　　}

　　

　　結(jié)果如下：

  scale()

　　元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度(X 軸)和高度(Y 軸)參數(shù)

　　有兩個(gè)div，它們的css樣式如下：

　　.before {

　　width: 70px;

　　height: 70px;

　　background-color: #8fbc8f;

　　}

　　.after {

　　width: 70px;

　　height: 70px;

　　background-color: #ffe4c4;

　　-webkit-transform: scale(1.5, 0.8);/*寬度變?yōu)樵瓉淼?/span>1.5倍，高度變?yōu)樵瓉淼?/span>0.8倍*/

　　-moz-transform: scale(1.5, 0.8);

　　-ms-transform: scale(1.5, 0.8);

　　-o-transform: scale(1.5, 0.8);

　　transform: scale(1.5, 0.8);

　　}

　　

　　結(jié)果如下：

　skew()

　　元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線(X 軸)和垂直線(Y 軸)參數(shù)

　　.before {

　　width: 70px;

　　height: 70px;

　　background-color: #8fbc8f;

　　}

　　.after {

　　width: 70px;

　　height: 70px;

　　background-color: #ffe4c4;

　　-webkit-transform: skew(20deg, 20deg);/*圍繞 X 軸把元素翻轉(zhuǎn)20度，圍繞 Y 軸翻轉(zhuǎn)20度*/

　　-moz-transform: skew(20deg, 20deg);

　　-ms-transform: skew(20deg, 20deg);

　　-o-transform: skew(20deg, 20deg);

　　transform: skew(20deg, 20deg);

　　}

　　

　　結(jié)果如下：

　transition:過渡

　　元素從一種樣式逐漸改變?yōu)榱硪环N的效果

　　有一個(gè)div，它的css樣式如下：

　　div {

　　width:100px;

　　height:100px;

　　background-color: #87cefa;

　　-webkit-transition: width 2s;/*時(shí)長(zhǎng)為2s的寬度變化效果*/

　　-moz-transition: width 2s;

　　-o-transition: width 2s;

　　transition: width 2s;

　　}

　　div:hover{

　　width:300px;

　　}

　　

文章來源：HTML5中國