?
このドキュメントでは、 php中國語ネットマニュアル リリース
語法：
transform：none | <transform-function>+
transform-function list:
matrix() = matrix(<number>[,<number>]{5,5})
matrix3d() = matrix3d(<number>[,<number>]{15,15})
translate() = translate(<translation-value>[,<translation-value>]?)
translate3d() = translate3d(<translation-value>,<translation-value>,<length>)
translatex() = translatex(<translation-value>)
translatey() = translatey(<translation-value>)
translatez() = translatez(<length>)
rotate() = rotate(<angle>)
rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)
rotatex() = rotatex(<angle>)
rotatey() = rotatey(<angle>)
rotatez() = rotatez(<angle>)
scale() = scale(<number>[,<number>]?)
scale3d() = scale3d(<number>,<number>,<number>)
scalex() = scalex(<number>)
scaley() = scaley(<number>)
scalez() = scalez(<number>)
skew() = skew(<angle>[,<angle>]?)
skewx() = skewx(<angle>)
skewy() = skewy(<angle>)
perspective() = perspective(<length>)
<translation-value> = <length> | <percentage>
默認值：none
適用于：所有塊級元素及某些內(nèi)聯(lián)元素
繼承性：無
動畫性：是
計算值：指定值，但相對長度會轉(zhuǎn)換為絕對長度
媒體：視覺
取值：
none：無轉(zhuǎn)換
2D Transform Functions：
matrix()：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a,b,c,d,e,f]變換矩陣
translate()：指定對象的2D translation（2D平移）。第一個參數(shù)對應X軸，第二個參數(shù)對應Y軸。如果第二個參數(shù)未提供，則默認值為0
translatex()：指定對象X軸（水平方向）的平移
translatey()：指定對象Y軸（垂直方向）的平移
rotate()：指定對象的2D rotation（2D旋轉(zhuǎn)），需先有 <' transform-origin '> 屬性的定義
scale()：指定對象的2D scale（2D縮放）。第一個參數(shù)對應X軸，第二個參數(shù)對應Y軸。如果第二個參數(shù)未提供，則默認取第一個參數(shù)的值
scalex()：指定對象X軸的（水平方向）縮放
scaley()：指定對象Y軸的（垂直方向）縮放
skew()：指定對象skew transformation（斜切扭曲）。第一個參數(shù)對應X軸，第二個參數(shù)對應Y軸。如果第二個參數(shù)未提供，則默認值為0
skewx()：指定對象X軸的（水平方向）扭曲
skewy()：指定對象Y軸的（垂直方向）扭曲
3D Transform Functions：
matrix3d()：以一個4x4矩陣的形式指定一個3D變換
translate3d()：指定對象的3D位移。第1個參數(shù)對應X軸，第2個參數(shù)對應Y軸，第3個參數(shù)對應Z軸，參數(shù)不允許省略
translatez()：指定對象Z軸的平移
rotate3d()：指定對象的3D旋轉(zhuǎn)角度，其中前3個參數(shù)分別表示旋轉(zhuǎn)的方向x,y,z，第4個參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略
rotatex()：指定對象在x軸上的旋轉(zhuǎn)角度
rotatey()：指定對象在y軸上的旋轉(zhuǎn)角度
rotatez()：指定對象在z軸上的旋轉(zhuǎn)角度
scale3d()：指定對象的3D縮放。第1個參數(shù)對應X軸，第2個參數(shù)對應Y軸，第3個參數(shù)對應Z軸，參數(shù)不允許省略
scalez()：指定對象的z軸縮放
perspective()：指定透視距離
說明：
對應的腳本特性為transform。
兼容性：
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit- |
| 9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+ | |
| 10.0+ | 16.0+ |
示例：
實例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>2D transform_CSS參考手冊_web前端開發(fā)參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
.test li p{width:300px;height:100px;margin:0;background:#ddd;}
.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
</style>
</head>
<body>
<h1>矩陣變換：matrix()</h1>
<ul class="test">
<li class="matrix">
<p>transform:matrix(0,1,1,1,10,10)</p>
</li>
</ul>
<h1>平移：translate(), translateX(), translateY()</h1>
<ul class="test">
<li class="translate">
<p>transform:translate(5%,10px)</p>
</li>
<li class="translate2">
<p>transform:translate(-10px,-10px)</p>
</li>
<li class="translateX">
<p>transform:translateX(20px)</p>
</li>
<li class="translate3">
<p>transform:translate(20px)</p>
</li>
<li class="translateY">
<p>transform:translateY(10px)</p>
</li>
<li class="translate4">
<p>transform:translate(0,10px)</p>
</li>
</ul>
<h1>旋轉(zhuǎn)：rotate()</h1>
<ul class="test">
<li class="rotate">
<p>transform:rotate(-15deg)</p>
</li>
<li class="rotate2">
<p>transform:rotate(15deg)</p>
</li>
</ul>
<h1>縮放：scale()</h1>
<ul class="test">
<li class="scale">
<p>transform:scale(.8)</p>
</li>
<li class="scale2">
<p>transform:scale(1.2)</p>
</li>
</ul>
<h1>扭曲：skew()</h1>
<ul class="test">
<li class="skew">
<p>transform:skew(-5deg)</p>
</li>
<li class="skew2">
<p>transform:skew(-5deg,-5deg)</p>
</li>
</ul>
</body>
</html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例