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);
}

 

效果：

 

 

 

 

以往我们叠加效果都是用逗号(“，”)隔开，但在transform中使用多个transform-function时却需要有空格隔开。

最后我们再来看一个综合实例：

 

 

这里还有其他额一些transform，我们后期再来总结；