css3新特性+less试验（2）——transform

本次试验将深入探索CSS3的新特性——transform(变形)。

实验对象：transform

transform：顾名思义，就是【变形】的意思，在CSS3中的变形有以下几种：旋转 （rotate） | 扭曲 （skew） | 缩放 （scale） | 移动 （translate） | 矩阵变形 （matrix），注意，不同于gradient是background属性的值，transform本身是一个属性。

语法

transform:transform: none | rotate | scale | skew | translate |matrix;

试验

1、rotate [旋转]

用法

transform:rotate(<angle>) 

html

<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>

less

.rotate(@angle) {
  transform: rotate(@angle);
}

.box {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;;
}

.box1 {
  .box;
  .rotate(20deg);
}

.box2 {
  .box;
  .rotate(45deg);
}

.box3 {
  .box;
  .rotate(90deg);
}

.box4 {
  .box;
  .rotate(180deg);
}

.box5 {
  .box;
  .rotate(270deg);

}
.box6 {
  .box;
  .rotate(360deg);
}

CSS

.box {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
}
.box1 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(20deg);
}
.box2 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(45deg);
}
.box3 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(90deg);
}
.box4 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(180deg);
}
.box5 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(270deg);
}
.box6 {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
  border-top: 4px solid red;
  background: black;
  float: left;
  transform: rotate(360deg);
}

效果

从左至右依次为box1~box6，我们可以看出，在CSS中，所有角度值的变化都如图片中下半部分所示，请注意体会，如果不清楚，请看下图，我加入了单位格子为100*100的网格线，还有边框为4PX的外层DIV，并取消各个box的margin值以后的效果：

可以看到，实际上，rotate的旋转是围绕着一个圆心的，而默认不设置圆心位置的话，圆心就是旋转元素自身的几何中心，即（50%，50%），上图是我将圆心设置为（0%，0%）后的效果。

看看我的代码（less中的代码）:

.rotate(@angle) {
  transform: rotate(@angle);
  transform-origin:0% 0%; //这里就是设置圆心的代码
}

你可以自己尝试一下设置不同的圆心效果有何不同哦！

2 、skew 【扭曲】

用法

transform:skew(<angle> [, <angle>]);

第一个参数为x轴的斜切角度，第二个参数为Y轴斜切角度，也可以分别来写：

transform:skewX(<angle>); |  transform:skewY(<angle>);

HTML

<div class="content">

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>

</div>

less

.skew(@x_angle:0;@y_angle:0){
  transform: skew(@x_angle,@y_angle);
}

body{
  background: url("bg.png") repeat;
}

.content {
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
  width: 1400px;
  height: 800px;
  border: 4px solid #ffff00;
}
.box {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color:#ffffff;
}

.box1{
  .box;
  .skew(30deg);
}

.box2{
  .box;
  .skew(0deg,30deg);
}

.box3{
  .box;
  .skew(30deg,30deg);
}

.box4{
   .box;
   .skew(50deg);
 }

.box5{
  .box;
  .skew(130deg);
}

.box6{
  .box;
  .skew(170deg);
}

css

body {
  background: url("bg.png") repeat;
}
.content {
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
  width: 1400px;
  height: 800px;
  border: 4px solid #ffff00;
}
.box {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
}
.box1 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(30deg, 0);
}
.box2 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(0deg, 30deg);
}
.box3 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(30deg, 30deg);
}
.box4 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(50deg, 0);
}
.box5 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(130deg, 0);
}
.box6 {
  width: 100px;
  height: 100px;
  border-top: 4px solid red;
  background: black;
  margin-right: 100px;
  float: left;
  color: #ffffff;
  transform: skew(170deg, 0);
}

效果

从左至右分别是box1~box6，我们可以看出，box4与box5，分别在X轴斜切角度为50deg和130deg，而它们相对于Y轴对称，我们可以由此得出：skew的角度范围为0~180deg，不能为90deg，为什么不能为90deg呢，你可以试试就知道了。

同样滴，斜切也是有参照圆心的，依旧是transform-origin。这个大家可以自己试验，之后的实验中再不说明。

3、translate [平移]

用法

transform:translate(<length> [, <length>]);

第一个参数为x轴的平移距离，第二个参数为Y轴平移距离，也可以分别来写：

transform:translateX(<length>); |  transform:translateY(<length>);

这个比较简单，没什么特别说明的，就不演示代码了

4、scale[缩放]

用法

transform:scale(<number> [, <number>]);

第一个参数为x轴的缩放倍数，第二个参数为Y轴缩放倍数，均支持小数，也可以分别来写：

transform:scaleX(<number>); |  transform:scaleY(<number>);

这个也比较简单，没什么特别说明的，就不演示代码了

5、matrix[矩阵变形]

用法

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

由于本人数学是渣渣，对于矩阵也是不甚了解，所以这里不知如何下手，如果有知道的大神能制作一个关于此的教程，请劳烦第一时间告知一下文章地址。