CSS之Transform
咱們利用css3中的transform能夠實現文字或圖像的旋轉、縮放、傾斜和移動四種類型的變形處理。css
本文使用的是標準的transform，亦可使用各個瀏覽器對應私有的屬性。對應以下html
- -webkit-transform
- -moz-transform
- -o-transform
不過在個人電腦上用transform效果相同，Chrome 49 Firefox 46 IE 10css3
1、旋轉(rotate)web
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
語法格式以下：chrome
rotate(angle)瀏覽器
旋轉角度單位有：函數
- deg 指角度制,一週的角度是360°,直角是90°
- grad 指百分度制,一週的角度是400,直角是100
- turn 圈, 1turn表明旋轉一圈
- rad 指弧度制,一週的角度是2π,直角是π/2
轉換比例爲： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad字體
2、縮放(scale)code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
transform: scale(1,-1)
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
語法格式以下：orm
scale(number,[number2])
number2是可選的，若是未設置，則與默認與number相同。number能夠爲正數、負數、小數。
咱們將number分爲兩部分，正負號(+,-)和數值(number的絕對值)。負號(-)意味着元素要被旋轉180度，數值部分大於1則放大，小於一則縮小，等於一既不放大又不縮小，爲零時消失。
3、移動(translate)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
transform: translate(2in,5cm)
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
語法格式以下：
translate(value1,[value2])
第一個參數表示相對於原位置X軸偏移距離，第二個參數表示相對於Y軸偏移個距離，若是省略了第二個參數，則默認爲0。正數向右和下偏移，負數向左和上偏移。
距離的單位有：
- 絕對長度單位
- px
- in
- cm
- mm
- 相對字體長度單位
- em
- rem
- pt
- pc
- ex
- ch
- 可視區百分比長度單位
- vw
- vh
- vmin
- vmax
- 離奇的長度單位
- %(百分比)
關於這些長度單位，這有一篇很好的介紹連接http://www.w3cplus.com/css/the-lengths-of-css.html，本段也是參照此連接，不過提示你們，瀏覽器的版本也在不斷的迭代，有些特性須要本身去驗證，好比vmax屬性在個人chrome瀏覽器下也行正常運行。
4、傾斜(skew)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
transform: skew(30deg,-0.1turn)
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
語法格式：
skew(angle,[angle])
第一個參數表示相對於X軸進行傾斜，第二個參數相對於Y軸進行傾斜，若是省略了第二個參數，則默認爲0。
rotate函數只是旋轉，不改變元素的形狀，但skew函數會改變元素的形狀。
5、變形
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
transform: matrix(1,0.4,0,1,0,0)
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
matrix()函數是一個3x3的矩陣，將舊的參數轉換成新的參數。
目前，我對此也不是很瞭解，你們若有興趣自行Google。
6、Transform-origin
CSS變形的原點默認是對象的中心點，若是要改變這個中心點，可使用transform-origin屬性進行定義。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img:hover{
/*以左上角爲原點旋轉*/
transform-origin: top left;
transform: rotate(30deg);
}
</style>
</head>
<body>
<img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>
語法格式：
transform-origin:[ [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | buttom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ]]
transform-origin屬性的初始值是50%,50%，使用與塊狀元素和內聯元素。transform-origin接受連個參數，他們能夠是百分比、em、px等具體值也能夠是left、center、right，或者top、middle、bottom等描述性關鍵字。
- 1. css之變形（transform）
- 2. css學習之transform
- 3. css變形 transform
- 4. css animation transform
- 5. CSS-Transform-transition-Animation
- 6. css 3D transform變換
- 7. css的transform變換
- 8. CSS變形transform(2d)
- 9. CSS中transform 屬性
- 10. CSS中的transform與transition
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。