css3之transform 变换

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>2D transform_CSS</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
/*transform参数：
    matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
    translate(length[,length]):指定对象的2D translation(2D平移)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
    translateX(length):指定对象X轴（水平方向）的平移
    translateY(length):指定对象Y轴（垂直方向）的平移
    rotate(<angle>): 指定对象的2D rotation(2D旋转)，需先有transform-origin属性的定义
    scale(<number>[,<number>]): 指定对象的2D scale(2D缩放)。第一个参数对应X轴，第二个参数对应Y轴，
    scaleX(<number>) : 指定对象X轴的（水平方向）缩放
    scaleY(<number>) : 指定对象Y轴的（垂直方向）缩放
    skew(<angle>[,<angle>]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴，第二个参数对应Y轴。
    skewX(<number>) : 指定对象X轴的（水平方向）扭曲
    skewY(<number>) : 指定对象Y轴的（垂直方向）扭曲
*/
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);-o-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);-o-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);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-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>旋转：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>
            

 

 

 

2D transform_CSS

矩阵变换：matrix()

• transform:matrix(0,1,1,1,10,10)

平移：translate(), translateX(), translateY()

• transform:translate(5%,10px)

• transform:translate(-10px,-10px)

• transform:translateX(20px)

• transform:translate(20px)

• transform:translateY(10px)

• transform:translate(0,10px)

旋转：rotate()

• transform:rotate(-15deg)

• transform:rotate(15deg)

缩放：scale()

• transform:scale(.8)

• transform:scale(1.2)

扭曲：skew()

 

•  

  transform:skew(-5deg)

• transform:skew(-5deg,-5deg)

aaa