今天小編給大家分享一下css3怎么實現(xiàn)2D變形的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)專注于固安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供固安營銷型網(wǎng)站建設(shè)，固安網(wǎng)站制作、固安網(wǎng)頁設(shè)計、固安網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造固安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供固安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在css3中，加入了動畫功能，這使得網(wǎng)頁效果更加炫麗和簡單。我們可以用css3的2d變形屬性transform制作各種2d動畫，比如圖像旋轉(zhuǎn)、傾斜、縮放、移動等。

首先認(rèn)識一下css3 transform屬性，transform屬性的初始值是none，適用于塊元素和行內(nèi)元素。

transform的取值如下：

translate([, ])：

移動元素對象，基于X和Y坐標(biāo)移動重新定位元素。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)值為0

translateX()：指定對象X軸（水平方向）的平移

translateY()：指定對象Y軸（垂直方向）的平移

rotate()

旋轉(zhuǎn)元素對象，即指定對象的2D旋轉(zhuǎn)，按照 ransform-origin 屬性的定義為基點，默認(rèn)為 center,center。

允許傳遞的是一個度數(shù)值來進(jìn)行元素的轉(zhuǎn)動；這個度數(shù)值可以取正值也可以取負(fù)值，在這里，正值代表順時針旋轉(zhuǎn)，負(fù)值代表逆時針旋轉(zhuǎn)，在這里通過指定的角度參數(shù)對元素指定一個2Droation（2D旋轉(zhuǎn)），但是需要有trans-origin屬性的定義。trans-origin定義的是旋轉(zhuǎn)的基點，常見的寫法為：transform:rotate(30deg);表示順時針旋轉(zhuǎn)30度；

scale([, ])

縮放元素對象，即指定對象的2D縮放。

第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)取第一個參數(shù)的值。

它使用一個或者兩個正數(shù)和負(fù)數(shù)以及小數(shù)做為參數(shù)；兩參數(shù)的含義：依次x軸縮放和y軸縮放，正數(shù)代表放大，負(fù)數(shù)代表縮小，當(dāng)使用小數(shù)時，大于1代表放大，小于1代表縮小，當(dāng)使用一個參數(shù)時表示x軸和y軸縮放相同；

scale（）方法具有三種情況：

scale（x,y）使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）；

scaleX(x)元素僅水平方向縮放（x軸縮放）；

scaleY（y）元素僅垂直方向縮放（y軸縮放），這里要注意的是：這三個方法具有相同的縮放中心點和基數(shù)，其中心點就是元素的中心位置，縮放基數(shù)為1，值大于1元素放大，值小于1，元素則縮小。

scaleX()：指定對象X軸的（水平方向）縮放

scaleY()：指定對象Y軸的（垂直方向）縮放

skew( [, ])

傾斜元素對象，即指定對象斜切扭曲。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)值為0

skewX()：指定對象X軸的（水平方向）扭曲

skewY()：指定對象Y軸的（垂直方向）扭曲

matrix(,,,,,)：

定義矩陣變換，即以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a,b,c,d,e,f]變換矩陣。

下面通過一個簡單的示例，讓大家更好的理解css3 2D transform屬性。

在本示例中，鼠標(biāo)經(jīng)過圖像時div元素會放大并旋轉(zhuǎn)，移開鼠標(biāo)后又恢復(fù)原來的效果。

css樣式代碼如下：

div {

    margin:100px 0;

    width: 400px;

    height: 100px;

    background:url(images/bg1.jpg) center;

}

div:hover {

    /* 定義動畫的狀態(tài) */

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -transform: rotate(-90deg);

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

以上就是“css3怎么實現(xiàn)2D變形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：css3怎么實現(xiàn)2D變形
標(biāo)題鏈接：http://www.chinadenli.net/article10/gpohgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)頁設(shè)計公司、App設(shè)計、外貿(mào)建站、云服務(wù)器、網(wǎng)站策劃

廣告

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