CSS3 轉換 transform

來源:互聯網
上載者:User

標籤:--   轉換   href   順時針   :hover   如何使用   mat   執行個體   旋轉   

2D變換方法:一般用於hover

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

    1、translate()方法 ---移動

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

    執行個體 translate值(50px,100px)是從左邊元素移動50個像素,並從頂部移動100像素

    div

    {

    transform: translate(50px,100px);

    -ms-transform: translate(50px,100px);/* IE 9 */

    -webkit-transform: translate(50px,100px);/* Safari and Chrome */

    }

     

    2、rotate()方法 ---旋轉

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

    執行個體 rotate值(30deg)元素順時針旋轉30度

    div:hover

    {

    transform: rotate(30deg);

    -ms-transform: rotate(30deg);/* IE 9 */

    -webkit-transform: rotate(30deg);/* Safari and Chrome */

    }

     

    3、scale()方法 ----放大(縮小

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

    執行個體 scale(2,4)轉變寬度為原來的大小的2倍,和其原始大小4倍的高度

    div:hover

    {

    transform: scale(2,4); /* 1.1 */

    -ms-transform: scale(2,4);/* IE 9 */

    -webkit-transform: scale(2,4);/* Safari and Chrome */

    }

     

    4、skew()方法 ---傾斜

    skew()方法,該元素會根據橫向(X軸)和垂直(Y軸)線參數給定角度:

    執行個體 skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素

    div:hover

    {

    transform: skew(30deg,20deg);

    -ms-transform: skew(30deg,20deg);/* IE 9 */

    -webkit-transform: skew(30deg,20deg);/* Safari and Chrome */

    }

     

    matrix()方法

    matrix()方法把所有2D轉換方法組合在一起。

    matrix()方法需要六個參數,包含數學函數,允許您:旋轉、縮放、移動以及傾斜元素。

    執行個體 如何使用 matrix 方法將 div 元素旋轉30度:

    div

    {

    transform:matrix(0.866,0.5,-0.5,0.866,0,0);

    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */

    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Firefox */

    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */

    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Opera */

    }

     



來自為知筆記(Wiz)



CSS3 轉換 transform

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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