CSS3 2D 转换

CSS3 2D 转换

先看兼容性

transform属性向应用元素应用2d 或者 3d装换；该属性允许我们进行旋转，缩放，移动或者倾斜；

基本语法：

transform: none|transform-functions;
transform-function：这东东有n的函数可以使用，我先来了解常用的；

rotate(angle)

通过制定角度参数来对原元素指定一个2d的旋转，不过先要设置transform-origin；

它表示旋转的基点；angle设置为正数则顺时针，为负数则表示逆时针；

css：

.demo{height:80px;width:200px;position:absolute;top:50px;background:green;-ms-transform:rotate(7deg);-moz-transform:rotate(7deg);-webkit-transform:rotate(7deg);-o-transform:rotate(7deg);
}

效果：

(默认的它是以自己中心为基点开始旋转滴呀,可以通过改变transform-origin来改变他的值滴呀)

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

CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，

我们就可以使用transform-origin来对元素进行原点位置改变

下图中的红点代表中旋转的基点：

还有更多关于transform-origin的基础知识，我们稍后再总结，我们先对transform有一个总体的认识。

接下来时我们的

Ttranslate（x,y）

TranslateX(x,y)水平方向和垂直方向上的移动，

TranslateX(x)；仅水平方向上的移动;

TranslateY(y)仅垂直方向上的移动；

距离的我们看实例；

Css:

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:translate(200px,0px);-ms-transform:translate(200px,0px);-moz-transform:translate(200px,0px);-webkit-transform:translate(200px,0px);-o-transform:translate(200px,0px);
}

效果：

缩放scale（x,y）

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；

scaleX(x)元素仅水平方向缩放（X轴缩放）

scaleY(y)元素仅垂直方向缩放（Y轴缩放）

其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小

css代码：

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:scale(2,2);-ms-transform:scale(2,2);-moz-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:scaleX(2);-ms-transform:scaleX(2);-moz-transform:scaleX(2);-webkit-transform:scaleX(2);-o-transform:scaleX(2);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:scaleY(2);-ms-transform:scaleY(2);-moz-transform:scaleY(2);-webkit-transform:scaleY(2);-o-transform:scaleY(2);
}

效果：（这里你还发现，虽然div被放大了，但是它原有的占位并没有变化）

扭曲skew(xy,)

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

*{color:white;
}
.or{height:80px;width:160px;float:left;background:green;
}
.demo{height:80px;width:160px;float:left;background:green;transform:skewX(30deg);-ms-transform:skewX(30deg);-moz-transform:skewX(30deg);-webkit-transform:skewX(30deg);-o-transform:skewX(30deg);
}
.demo1{height:80px;width:160px;float:left;background:red;transform:skewY(10deg);-ms-transform:skewY(10deg);-moz-transform:skewY(10deg);-webkit-transform:skewY(10deg);-o-transform:skewY(10deg);
}
.demo2{height:80px;width:160px;float:left;background:black;transform:skew(30deg,10deg);-ms-transform:skew(30deg,10deg);-moz-transform:skew(30deg,10deg);-webkit-transform:skew(30deg,10deg);-o-transform:skew(30deg,10deg);
}