CSS3变形transform 2D初级了解

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
   *{margin:0;padding:0;}
   .clearfix{zoom:1;}
   .clearfix:after{content:'\20';display:block;height:0;clear:both;}
   body{font-size:62.5%;padding:0;}

   .con1,.con2,.con3,.con4{width:30px;height:30px;background:#f00;margin:60px auto 0;text-align:center;}
   .con1:hover{
       -webkit-transform:translate(50px,50px) scale(2) rotate(250deg);
       -moz-transform:translate(50px,50px) scale(2) rotate(250deg);
       -o-transform:translate(50px,50px) scale(2) rotate(250deg);
       -ms-transform:translate(50px,50px) scale(2) rotate(250deg);
       transform:translate(50px,50px) scale(2) rotate(250deg);
   }
   /*同一个变形函数中逗号隔开，多个不同变形函数空格隔开，注意写不同浏览器之间的兼容，通用放最下面*/
   .con2:hover{-webkit-transform:skew(-50deg);}

　　/*倾斜大于90deg好像会有问题，可能没研究透*/
   .con3:hover{-webkit-transform:translate(-50px,-50px) scale(.5) rotate(-250deg);}
   /*位移X轴负值是向左，正值向右，Y轴负值是向上,正值向下。
   缩放值在0-1之间为收缩，大于1为放大，
   旋转正值顺时针旋转，负值逆时针旋转*/
   .con4:hover{-webkit-transform:translate(50px, 50px) translate(-50px, -50px);}
   /*多个位移之间会相叠加减*/
</style>
</head>
<body>

<div class="con1">
   <p>哈</p>
   <p>嘿</p>
</div>

<div class="con2">
   <p>哈</p>
   <p>嘿</p>
</div>

<div class="con3">
   <p>哈</p>
   <p>嘿</p>
</div>

<div class="con4">
   <p>哈</p>
   <p>嘿</p>
</div>

<p>2D变形有：translateX(),translateY(),scaleX(),scaleY(),skewX(),skewY(),rotate()</p>

<p>3D变形有：rotateX(),rotateY(),rotateZ(),rotate3d(),translateZ(),translate3d(),scaleZ(),scale3d(),</p>

</body>
</html>

2D transform常用的transform-function的功能:

translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。
scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。
rotate()：用来旋转元素。
skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。
matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d()：移元素元素，用来指定一个3D变形移动位移量
translate()：指定3Ｄ位移在Ｚ轴的位移量。
scale3d()：用来缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d()：指定元素具有一个三维旋转的角度。
rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
perspective()：指定一个透视投影矩阵。
matrix3d()：定义矩阵变形。

transform-origin属性

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，

如果我们把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处，

CSS3变形中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点，但其中的位移translate()始终以元素中心点进行位移。

改变transform-origin属性的X轴和Ｙ轴的值就可以重置元素变形原点位置，其基本语法如下所示:

transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?

可以拆分为

/*只设置一个值的语法*/
transform-origin: x-offset                      /*一个值，百分比，em,px则定位X轴原点*/
transform-origin:offset-keyword                 /*一个值，left right center定位X轴，top bottom定位Y轴*/


/*设置两个值的语法*/ 
transform-origin：x-offset  y-offset            /*两个值，百分比，em,px则第一个数值定位X轴原点第二个数值定位Y轴原点*/
transform-origin：y-offset  x-offset-keyword    /*两个值，第二个值为left right center则 第一个百分比，em,px值定义Y轴原点*/   transform-origin:10px center中的10px定位的是X轴还是Y轴原点？
transform-origin：x-offset-keyword  y-offset   
transform-origin：x-offset-keyword  y-offset-keyword/*两个值，都为top left right bottom center，则 left right定义X轴原点，top bottom定义Y轴原点/
transform-origin：y-offset-keyword  x-offset-keyword/*两个值，都为top left right bottom center，则 left right定义X轴原点，top bottom定义Y轴原点/


/*设置三个值的语法*/
transform-origin：x-offset  y-offset  z-offset
transform-origin：y-offset  x-offset-keyword  z-offset
transform-origin：x-offset-keyword  y-offset  z-offset
transform-origin：x-offset-keyword  y-offset-keyword  z-offset
transform-origin：y-offset-keyword  x-offset-keyword  z-offset

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。

3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：

x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用<length>和<percentage>值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用<length>和<percentage>值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。
x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。
y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Ｙ轴的偏移量。
z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以<length>，不过<percentage>在这里将无效。

posted on 2015-02-27 10:59 鬼鬼丫404 阅读(90) 评论(0) 收藏举报

刷新页面返回顶部