首頁 > 開發者 > 網站開發

CSS3 2D 轉換

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：x64   cad   dpx   bdr   nbsp   oge   vmw   tsx   pmd   

CSS3轉換，我們可以移動，比例化，反過來，旋轉，和展開元素。

 

 

2D 轉換

在本章您將瞭解2D變換方法：

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div{    width:200px;    height:100px;    background-color:yellow;    /* Rotate div */    transform:rotate(30deg);    -ms-transform:rotate(30deg); /* IE 9 */    -webkit-transform:rotate(30deg); /* Safari and Chrome */}</style></head><body><div>Hello</div></body></html>

 

 

 

translate() 方法

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */}

 

translate值（50px，100px）是從左邊元素移動50個像素，並從頂部移動100像素。

 rotate() 方法

rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

 

rotate值（30deg）元素順時針旋轉30度。

 

 

 

scale() 方法

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數：

 

 

div {    margin: 150px;    width: 200px;    height: 100px;    background-color: yellow;    border: 1px solid black;    border: 1px solid black;    -ms-transform: scale(2,3); /* IE 9 */    -webkit-transform: scale(2,3); /* Safari */    transform: scale(2,3); /* 標準文法 */}

 

scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。

 

skew() 方法文法 
transform:skew(<angle> [,<angle>]);

 

 

包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空白，則預設為0，參數為負表示向相反方向傾斜。

  • skewX(<angle>);表示只在X軸(水平方向)傾斜。
  • skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div{    width:100px;    height:75px;    background-color:red;    border:1px solid black;}div#div2{    transform:skew(30deg,20deg);    -ms-transform:skew(30deg,20deg); /* IE 9 */    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */}</style></head><body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body></html>

 

 

 

 

 

CSS3 2D 轉換

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition cairo 2d 2d moba 2d jrpg 2d fighter 2d intro
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More