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