位移translate()函數(shù)

結(jié)合起來，translate()函數(shù)移動元素主要有以下三種移動：

• 水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
• 垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
• 對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

translate只有一個值的時候默認為translate(tx 0)

縮放scale()函數(shù)

縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值默認與第一個值相等。

在scale()函數(shù)中，取值除了可以取正值之外，同時還可以取負值。只不過取負值時，會先讓元素進行翻轉(zhuǎn)，然后在進行縮放。

scale()函數(shù)對元素進行縮放時，都是以元素的中心為基點，但可以通過transform-origin來改變元素的基點。

但是，要小心，如果你將值設(shè)置為“0”時，元素將會消失。我想，如果沒必要，你是不會這樣做的。當(dāng)我們僅給scale() 函數(shù)只顯式設(shè)置一個值時，會使對象成正比例放大或縮小。如果需要將對象在X軸和Y軸兩個方向設(shè)置不同的值。

?

scale()函數(shù)和translate()函數(shù)極其相似，除了能通過scale()函數(shù)使用元素水平方向和垂直方向同時縮放（也就是元素沿X軸和Y軸同時縮放）之外，也可以使元素僅沿著X軸或Y軸方向縮放：

• scale(sx)
• scale(sx,sy)
• scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
• scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。

?

旋轉(zhuǎn)rotate()函數(shù)

rotate()函數(shù)的使用很簡單，其基本語法如下：

rotate(a);

rotate()函數(shù)只接受一個值，

a：代表的是一個旋轉(zhuǎn)的角度值。其取值可以是正的，也可以是負的。如果取值為正值時，元素默認之下相對元素中心點順時針旋轉(zhuǎn)；如果取值為負值時，元素默認之下相對元素中心點逆時針旋轉(zhuǎn)。

在默認之下，rotate()函數(shù)旋轉(zhuǎn)元素是相對于元素中心點進行旋轉(zhuǎn)，同樣，我們可以通過transform-origin屬性重置元素的旋轉(zhuǎn)原點：

div img:nth-child(2){ z-index: 2; transform-origin: top left; transform: rotate(45deg); }

傾斜skew()函數(shù)

傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀。
skew(ax)

或者

skew(ax,ay)

其屬性值說明如下：

• ax：用來指定元素水平方向（X軸方向）傾斜的角度。
• ay：用來指定元素垂直方向（Y軸方向）傾斜的角度。如果未顯式的設(shè)置這個值，其默認為０。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhp404/articles/4305105.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的CSS3 2D Transform的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。