CSS3 transform轉(zhuǎn)換
一.基本知識(shí):
2D轉(zhuǎn)換能夠改變指定元素的位置、尺寸和形狀屬性。
實(shí)作2D轉(zhuǎn)換需要使用transform屬性，屬性值是一些轉(zhuǎn)換函數(shù)，以下分別來(lái)做介紹。
二.轉(zhuǎn)換函數(shù):
1.translate()函數(shù):
此函數(shù)可以根據(jù)參數(shù)實(shí)現(xiàn)指定元素的移動(dòng)效果。
有兩個(gè)參數(shù)，第一個(gè)參數(shù)規(guī)定水平方向的位移距離，第二個(gè)參數(shù)規(guī)定垂直方向的位移距離。
程式碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http:/
/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:translate(50px,50px);
-ms-transform:translate(50px,50px);/*IE9 */
-webkit-transform:translate(50px,50px);/*Safari and Chrome*/
-o-transform:translate(50px,50px);/* Opera*/
-moz-transform:translate(50px,50px);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>以上程式碼可以設(shè)定div在水平方向和垂直方向的位移都是50px。
特別說(shuō)明:如果只有一個(gè)參數(shù)，那麼這個(gè)參數(shù)同時(shí)應(yīng)用於水平和垂直方位;如果參數(shù)是百分比值，參考尺寸是元素本身對(duì)應(yīng)的長(zhǎng)度和寬度尺寸；對(duì)於下面的函數(shù)同樣適用。
2.rotate()函數(shù):
此函數(shù)可以規(guī)定元素的順時(shí)針旋轉(zhuǎn)角度，如果為負(fù)值，則是逆時(shí)針旋轉(zhuǎn)。
程式碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:rotate(60deg);
-ms-transform:rotate(60deg);/* IE 9 */
-webkit-transform:rotate(60deg);/* Safari and Chrome */
-o-transform:rotate(60deg);/* Opera */
-moz-transform:rotate(60deg);
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>以上程式碼可以將div元素順時(shí)針旋轉(zhuǎn)60度。
3.scale()函數(shù):
此函數(shù)可以實(shí)作指定元素的縮放效果。
有兩個(gè)參數(shù)，第一個(gè)參數(shù)是寬度縮放倍數(shù)，第二個(gè)是高度縮放倍數(shù)。
程式碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
margin:100px;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:scale(2,3);
-ms-transform:scale(2,3);/* IE 9 */
-webkit-transform:scale(2,3);/* Safari 和 Chrome */
-o-transform:scale(2,3);/* Opera */
-moz-transform:scale(2,3);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>以上程式碼可以將div寬度放大兩倍，高度放大三倍。
4.skew()函數(shù):
此函數(shù)可以設(shè)定指定元素的扭曲角度。
有兩個(gè)參數(shù)，第一個(gè)參數(shù)設(shè)定水平方向上的扭曲變形，第二個(gè)參數(shù)設(shè)定垂直方向的扭曲變形。
第二個(gè)參數(shù)如果省略，那麼預(yù)設(shè)值就是0。
程式碼實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(45deg);
-ms-transform:skew(45deg);/*IE9*/
-webkit-transform:skew(45deg);/*Safari and Chrome*/
-o-transform:skew(45deg);/*Opera*/
-moz-transform:skew(45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(" + value + "deg)";
oinner.style.msTransform="skew(" + value + "deg)";
oinner.style.webkitTransform="skew(" + value + "deg)";
oinner.style.MozTransform="skew(" + value + "deg)";
oinner.style.OTransform="skew(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文網(wǎng)</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>以上程式碼可以測(cè)試水平方向的扭曲，拖曳捲軸測(cè)試，則可以一目了然了。
實(shí)例程式碼二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(0,45deg);
-ms-transform:skew(0,45deg);/*IE9*/
-webkit-transform:skew(0,45deg);/*Safari and Chrome*/
-o-transform:skew(0,45deg);/*Opera*/
-moz-transform:skew(0,45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(0," + value + "deg)";
oinner.style.msTransform="skew(0," + value + "deg)";
oinner.style.webkitTransform="skew(0," + value + "deg)";
oinner.style.MozTransform="skew(0," + value + "deg)";
oinner.style.OTransform="skew(0," + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文網(wǎng)</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>以上程式碼可以測(cè)試垂直方向的扭曲，拖曳滾動(dòng)條測(cè)試，則可以一目了然了。
5.matrix()函數(shù):
以一個(gè)包含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換，相當(dāng)於直接應(yīng)用一個(gè)[a b c d e f]變換矩陣。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>利用matrix()方法旋轉(zhuǎn)div元素30°
