css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
我要評(píng)論前言
CSS3提供了2D轉(zhuǎn)換功能，能夠?qū)υ剡M(jìn)行移動(dòng)、縮放和轉(zhuǎn)動(dòng)等功能。
2D轉(zhuǎn)換的屬性名為transform，使用方法為transform:method(value)。
2D轉(zhuǎn)換方法有translate、scale、rotate、skew、matrix，還有基于這些分支出的translateX、scaleY等。
這里，我將會(huì)介紹到以下轉(zhuǎn)換方法：
- translate()
- rotate()
- scale()
- skew()
首先，我們先插入一個(gè)簡(jiǎn)單的html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3的2D轉(zhuǎn)換</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#picture{
width：100%;
height:500px;
background:#ccc;
}
img{
margin:100px 0 0 100px;
}
</style>
</head>
<body>
<div id="picture">
<img src="mary.gif" alt="This is a picture" >
</div>
</body>
</html>
這段代碼我們可以實(shí)現(xiàn)在一個(gè)div里放一張圖片，通過(guò)這張圖片以便于向大家介紹以下方法。
1.translate（）方法：這個(gè)方法里可以有兩個(gè)參數(shù)，中間用分號(hào)隔開(kāi)，分別表示沿著X軸和Y軸移動(dòng)的距離，這個(gè)距離是相對(duì)于該圖片的移動(dòng)距離，且向右為X軸的正方向，向下為Y軸的正方向。下面的代碼表示將圖片向右移動(dòng)100px，向下也移動(dòng)100?！ ?/p>
img{
margin:100px 0 0 100px;
transform:translate(100px,100px);
}
2.rotate()方法：這個(gè)方法里有一個(gè)參數(shù)，表示要旋轉(zhuǎn)的度數(shù)，正數(shù)表示順時(shí)針旋轉(zhuǎn)，那么負(fù)數(shù)就表示逆時(shí)針旋轉(zhuǎn)了。在要旋轉(zhuǎn)的度數(shù)后面添加deg （即degree，度數(shù)的意思）。以下代碼表示將圖片順時(shí)針旋轉(zhuǎn)50°。
img{
margin:100px 0 0 100px;
transform:rotate(50deg);
｝
3.scale()方法：這個(gè)方法里有兩個(gè)參數(shù)，沒(méi)有單位。分別表示寬度和高度放大或縮小的倍數(shù)，如果大于1表示放大；如果小于一表示縮小。以下代碼表示將圖片的寬度和高度都放大兩倍。
img{
margin:100px 0 0 100px;
transform:scale(2,2);
}
4.skew（）方法：有兩個(gè)參數(shù)，分別表示沿著X軸和Y軸傾斜轉(zhuǎn)換，單位同樣是deg，表示角度。這個(gè)方法不是很容易理解。首先給出下列代碼：
img{
margin:100px 0 0 100px;
transform:skew(20deg,0deg);
｝
表示將圖片沿著x軸逆時(shí)針旋轉(zhuǎn)20度。
這是沒(méi)有使用skew（）方法的樣子
這是使用了skew（）方法之后的樣子。
為什么呢？這是因?yàn)槠鋢軸和Y軸的方向是這樣的：
當(dāng)x軸旋轉(zhuǎn)20°時(shí)會(huì)將圖片進(jìn)行逆時(shí)針旋轉(zhuǎn)，但是請(qǐng)注意：這里不是真正意義上的旋轉(zhuǎn)，而有拉伸傾斜的意思，旋轉(zhuǎn)之后，它的寬度并沒(méi)有改變，并且做一條垂線可以發(fā)現(xiàn)高也是沒(méi)有改變的。
對(duì)于Y軸方向的旋轉(zhuǎn)是一樣的：
img{
margin:100px 0 0 100px;
transform:skew(0deg,20deg);
｝
上面的代碼表示將圖片沿著Y軸方向旋轉(zhuǎn)了20°。
旋轉(zhuǎn)之后，就是下面這樣了：它是沿著順時(shí)針?lè)较蛐D(zhuǎn)的。
如果，我們對(duì)x和y軸都旋轉(zhuǎn)呢？
img{
margin:100px 0 0 100px;
transform:skew(20deg,20deg);
｝
那么最終就是綜合作用的效果了，如下圖所示：
說(shuō)了這么多，大家有沒(méi)有發(fā)現(xiàn)我們每次偏移，旋轉(zhuǎn)，傾斜，放大和縮小是相對(duì)于哪個(gè)點(diǎn)呢？
如果你稍微細(xì)心的話，就會(huì)發(fā)現(xiàn)是相對(duì)于中心點(diǎn)。這里就要用到tansform-origin屬性了。
即通過(guò)這個(gè)屬性，我們可以規(guī)定這些方法通過(guò)哪一個(gè)點(diǎn)作為原點(diǎn)。
首先舉幾個(gè)例子。
transform-origin：0 0；表示以左上角為原點(diǎn)。
transform-origin：100% 0；表示以右上角為原點(diǎn)
transform-origin：0 100%；表示以左下角為原點(diǎn)
transform-origin：100% 100%；表示以右下角為原點(diǎn)
于是我們可以得知，這些值的設(shè)定是以左上角為基點(diǎn)的，向右為x軸的正方向，向下為y軸的正方向。如果不設(shè)定這個(gè)屬性，那么默認(rèn)值為
transform-origin:50% 50%;即以中心作為變換的基點(diǎn)。
最后我還要說(shuō)一下瀏覽器兼容的問(wèn)題，為了使代碼能在各個(gè)瀏覽器運(yùn)行成功，我們需要在層疊樣式表中多加幾行代碼，比如說(shuō)rotate()方法：
transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */
這樣，我們就可以在各個(gè)主要瀏覽器流暢運(yùn)行了！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位學(xué)習(xí)或者使用CSS3能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果實(shí)例詳解
對(duì)于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對(duì)元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里，擴(kuò)展出了一個(gè)z軸，這個(gè)z軸垂直于屏幕并指向外面2017-05-02用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果
這篇文章主要介紹了用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-13CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時(shí)提到了關(guān)于瀏覽器的支持問(wèn)題,需要的朋友可以參考下2015-08-04
css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果
這篇文章主要介紹了css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來(lái)的2D轉(zhuǎn)換而來(lái)，與2D轉(zhuǎn)換的功能相似，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-02-18
