css3怎么實現2D變形

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

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

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

transform的取值如下：

translate([, ])：

移動元素對象，基于X和Y坐標移動重新定位元素。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0

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

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

rotate()

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

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

scale([, ])

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

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值。

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

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

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

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

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

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

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

skew( [, ])

傾斜元素對象，即指定對象斜切扭曲。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0

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

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

matrix(,,,,,)：

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

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

在本示例中，鼠標經過圖像時div元素會放大并旋轉，移開鼠標后又恢復原來的效果。

css樣式代碼如下：

div {

    margin:100px 0;

    width: 400px;

    height: 100px;

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

}

div:hover {

    /* 定義動畫的狀態 */

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

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

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

    -transform: rotate(-90deg);

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

}

以上就是“css3怎么實現2D變形”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。