這篇文章主要講解了“css3的變形功能類型有哪些”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3的變形功能類型有哪些”吧！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比寧晉網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式寧晉網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋寧晉地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

css3的變形功能包括4種類型：1、旋轉(zhuǎn)，利用rotate()、rotateX()等實現(xiàn)；2、縮放，利用scale()、scaleX()等實現(xiàn)；3、傾斜，利用skew()、skewX()等實現(xiàn)；4、移動，利用translate()等實現(xiàn)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

變形主要值得是利用transform功能來實現(xiàn)文字或圖片的旋轉(zhuǎn)，縮放，傾斜，移動這四種處理。

1、旋轉(zhuǎn)-----transform:rotate(xxdeg);

( IE9以上，safari 3.1以上,chrome 8以上、FireFox 4以上、Opera 10以上的瀏覽器都支持這些屬性)

先看例子：

<p id="test3">
     這是一個測試。
</p>
#test3{
     width:300px;
     margin: 100px auto;
     font-size: 40px;
     transform:rotate(45deg);
      }

transform:rotate(45deg);這句表示p元素順時針45度旋轉(zhuǎn)，deg是一個角度單位。效果如下：

2、縮放-----transform:scale(x)

<p id="test4">
        這是一個測試。
</p>

 #test4{
          width:300px;
          margin: 100px auto;
          font-size: 40px;
          transform:scale(0.5);  
  }

也可以分別指定元素水平和垂直方向上的縮放。例如，元素在水平方向縮小50%，在垂直方向放大一倍：

<p id="test5">
    這是一個測試。
</p>

#test5{
   width:300px;
   margin: 100px auto;
   font-size: 40px;
   transform:scale(0.5,2);  
}

上面兩個縮放的效果如下：

3、傾斜：使用skew方法來實現(xiàn)文字或圖片的傾斜處理，兩個參數(shù)分別指定水平方向上的傾斜角度和垂直方向的傾斜角度。例子：

<p id="test6">
    這是一個測試。
</p>

#test6{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:skew(30deg,45deg);      
 }

若只有一個參數(shù)，默認只在水平方向上傾斜，不在垂直方向傾斜。

4、移動：使用translate方法，兩個參數(shù)分別指定水平方向和垂直方向上的移動距離。若只有一個參數(shù)，默認只在水平方向上移動，垂直方向上不移動。

<p id="test7">
        這是一個測試。
</p>

 #test7{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:translate(150px,150px);  
 }

這些變形也可以組合使用：

<p id="test8">
        這是一個測試。
</p>

#test8{
    width:300px;
    margin: 100px auto;
    font-size: 40px;
    transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px);      
  }

將元素45度順時針旋轉(zhuǎn)，在縮小一半，然后在水平方向傾斜30度，在垂直方向傾斜45度，在分別在水平和垂直方向上移動150px,效果如下：

可以指定變形的基點：在使用transform進行變形時，是以元素的中心為基準點進行的。使用transform-origin屬性可以改變基準點。

<p id="test9">
    這是一個測試。
</p>

<p id="test10">
    這是一個測試。
</p>

#test9{
     position: absolute;
      width:150px;
      height:150px;
      background: green;
      margin: 100px 200px;
      font-size: 20px;
      transform:rotate(45deg);  
      }#test10{
      position: absolute;
      width:150px;
      height:150px;
      background: red;
      margin: 100px 200px;
      font-size: 20px;
      transform-origin:left top; /*定基準點*/
      transform:rotate(45deg)      
      }

效果如下：（紅色是把基準點頂?shù)阶笊宵c的，綠色是默認的）

transform-origin屬性的取值，前一個是“基準點在元素水平方向上的位置”，可以指定的值有：left,center,right;后一個值是“基準點在元素垂直方向上的位置”，可以指定的值有：top,center,bottom.

感謝各位的閱讀，以上就是“css3的變形功能類型有哪些”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對css3的變形功能類型有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

分享標題：css3的變形功能類型有哪些
文章源于：http://www.chinadenli.net/article6/gojdig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、App開發(fā)、小程序開發(fā)、動態(tài)網(wǎng)站、微信小程序、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)