CSS3依原点转换transform-origin几种情况应用实例

　　transform-origin 是 CSS3 中设置对象（div、ul li等）依某一个原点转换。例如一个正方形有四个点，可以设置它依其中一个原点转换，当然仅设置 transform-origin 属性看不出来，如果再设置一个旋转属性 rotate 就可以看出来了。

　　在网页设计中，依某一个点转换比较实用，例如某一个栏目的标题可以把它显示到一个旋转45度的正方形中，上下都为尖尖的顶点，比平的边好看一些，还可以把一段文字或图片显示到这样的图形中。下面先看 transform-origin 的语法规则，再看具体的应用实例。

 

　　一、transform-origin语法规则

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

　　表达式中分为两组值，第一组用于设置横坐标，第二组用于设置纵坐标。每组值都有五个值供选择，设置时选择其中之一即可。如果只设置一个值，则用于横坐标，纵坐标取默认值50%；如果设置两个值，第一个用于横坐标，第二个用于纵坐标。

 

　　二、transform-origin取值说明

　　transform-origin 的默认值为 50% 50%，相当于 center center。以下是每个取值的说明：

　　<percentage>：用百分比设置坐标值，可为负值；

　　<length>：用长度设置坐标值，也可为负值；

　　left：设置横坐标为left；

　　第一个center：设置横坐标为center；

　　right：设置横坐标为right；

　　top：设置纵坐标为top；

　　第二个center：设置纵坐标为center；

　　bottom：设置纵坐标为bottom。

 

　　三、transform-origin应用实例

　　实例1：transform-origin 取值 center center 和 0 0

　　html代码：

　　<div class="transform-div transform-origin-c">transform-origin: center center;</div>

　　<div class="transform-div transform-origin-b">transform-origin:73px 73px;</div>
　　<div class="transform-div transform-origin-0">transform-origin: 0 0;</div>

　　CSS样式：

　　.transform-div{ width:130px; height:130px; border:1px solid #ab9595; background-color:#e3e2e0; padding:8px; margin-left:100px;}

　　.transform-origin-c{ transform-origin:center center; transform:rotate(45deg);}

　　.transform-origin-b{ transform-origin:73px 73px; transform:rotate(45deg); margin-top:61px;}
　　.transform-origin-0{ transform-origin:0 0; transform:rotate(45deg);}

　　效果图：

 

　　从效果图中可以看出，转换原点都是正方向形的右下角的点，transform-origin 取值为 center center 的，向右边移了 73px。

 

　　实例2、transform-origin 取值 left top，right bottom 和 left bottom

　　html代码：

<div class="transform-div transform-origin-lt">transform-origin: left top;</div>
<div class="transform-div transform-origin-rb">transform-origin: right bottom;</div>
<div class="transform-div transform-origin-lb">transform-origin: left bottom;</div>

　　CSS样式：

　　.transform-origin-lt{transform-origin:left top;transform:rotate(45deg);}
　　.transform-origin-rb{transform-origin:right bottom;transform:rotate(45deg);}
　　.transform-origin-lb{transform-origin:left bottom;transform:rotate(45deg);}

　　效果图：

　　从上图可以看出，转换原点同样是右下角的点，随 transform-origin 的取值不同，正方形向右、向下移动的距离不同。