当前位置:主页 > 教程 > 网页设计 > div/css >

CSS3 transform属性使用详解

作者:秋军 发布时间:2017-04-20 阅读:

CSS3 transform属性使用教程将为大家全面解析transform属性的作用和使用方法,

语法:

transform:none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

默认值:none

 

取值:

none:无转换

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轴。如果第二个参数未提供,则默认值为0

skewX(<angle>):指定对象X轴的(水平方向)扭曲

skewY(<angle>):指定对象Y轴的(垂直方向)扭曲

说明:

设置或检索对象的转换。

对应的脚本特性为transform。

写法:


内核类型                                    写法    

Webkit(Chrome/Safari)            -webkit-transform    

Gecko(Firefox)                         -moz-transform    

Presto(Opera)                          -o-transform    

Trident(IE)                              -ms-transform    

W3C                                      transform   



示例:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 2D transform_CSS参考手册_web前端开发参考手册系列</title>
<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);-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>
<li>
<p>transform:matrix(0,1,1,1,10,10)</p>
</li>
</ul>
<h1>平移:translate(), translateX(), translateY()</h1>
<ul>
<li>
<p>transform:translate(5%,10px)</p>
</li>
<li>
<p>transform:translate(-10px,-10px)</p>
</li>
<li>
<p>transform:translateX(20px)</p>
</li>
<li>
<p>transform:translate(20px)</p>
</li>
<li>
<p>transform:translateY(10px)</p>
</li>
<li>
<p>transform:translate(0,10px)</p>
</li>
</ul>
<h1>旋转:rotate()</h1>
<ul>
<li>
<p>transform:rotate(-15deg)</p>
</li>
<li>
<p>transform:rotate(15deg)</p>
</li>
</ul>
<h1>缩放:scale()</h1>
<ul>
<li>
<p>transform:scale(.8)</p>
</li>
<li>
<p>transform:scale(1.2)</p>
</li>
</ul>
<h1>扭曲:skew()</h1>
<ul>
<li>
<p>transform:skew(-5deg)</p>
</li>
<li>
<p>transform:skew(-5deg,-5deg)</p>
</li>
</ul>
</body>
</html>


关键词: css css3 transform