css3 tranform学习

Transform

功能：实现文字，图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

 

在safari，chrome浏览器里需要将其写成

-webkit-transform

在firefox浏览器里需要写成

-mos-transform

在opera浏览器里需要写成

-o-transform

 

1.rotate：定义2D旋转

Rotate(x,y,z,angle)：定义3D旋转

 

div

{

margin:30px;

width:200px;

height:100px;

background-color:yellow;

/* Rotate div */

transform:rotate(9deg);

-ms-transform:rotate(9deg); /* Internet Explorer */

-moz-transform:rotate(9deg); /* Firefox */

-webkit-transform:rotate(9deg); /* Safari 和 Chrome */

-o-transform:rotate(9deg); /* Opera */

}

 

 

 

2.scale(x,y)：定义缩放

 

#MyDIV{transform:scale(1.5,1.5);

-ms-transform:scale(1.5,1.5);/* Internet Explorer */

-moz-transform:scale(1.5,1.5); /* Firefox */

-webkit-transform:scale(1.5,1.5);/* Safari 和 Chrome */

-o-transform:scale(1.5,1.5);/* Opera */}

 

 

3.skew(x,y)：倾斜

#MyDIV{transform:skew(10deg,10deg);

-ms-transform:skew(10deg,10deg);/* Internet Explorer */

-moz-transform:skew(10deg,10deg); /* Firefox */

-webkit-transform:skew(10deg,10deg);/* Safari 和 Chrome */

-o-transform:skew(10deg,10deg);/* Opera */}

 

 

 

 

 

4.translate(x,y)：移动

#MyDIV{transform:translate(20px,20px);

-ms-transform:translate(20px,20px);/* Internet Explorer */

-moz-transform:translate(20px,20px); /* Firefox */

-webkit-transform:translate(20px,20px);/* Safari 和 Chrome */

-o-transform:translate(20px,20px);/* Opera */}

 

 

 

 

 

 

5.综合应用

先移动，在旋转，再缩放

.Mydiv{

    width: 300px;

    background-color: yellow;

    text-align: center;

    -webkit-transform:translate(150px,150px) rotate(45deg) scale(1.5);

    -moz-transform:translate(150px,150px) rotate(45deg) scale(1.5);

    -o-transform:translate(150px,150px) rotate(45deg) scale(1.5);

}

 

 

结果如上图

 

图解

 

先旋转，再缩放，最后移动

-webkit-transform:rotate(45deg) scale(1.5) translate(150px,150px);

    -moz-transform:rotate(45deg) scale(1.5) translate(150px,150px);

-o-transform:rotate(45deg) scale(1.5) translate(150px,150px);

 

 

结果如上图

 

图解

 

 

在使用transform进行文字，图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

 

在safari，chrome浏览器里需要将其写成

-webkit-transform-origin

在firefox浏览器里需要写成

-mos-transform-origin

在opera浏览器里需要写成

-o-transform-origina

 

没有修改基准点时：

<div class="Mydiv1"></div>

        <div class="Mydiv2"></div>

        <p>Hello world! This is HTML5.</p>

 

.Mydiv1{

    width: 200px;

    height: 200px;

    display: inline-block;

    background-color: pink;

}

.Mydiv2{

    width: 200px;

    height: 200px;

    display: inline-block;

    background-color: green;

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -o-transform:rotate(45deg);

}

结果如下图

 

 

修改变形基准点后

.Mydiv2{

    width: 200px;

    height: 200px;

    display: inline-block;

    background-color: green;

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    -o-transform:rotate(45deg);

    /*修改变形基准点*/

    -webkit-transform-origin:left bottom;

    -moz-transform-origin:left bottom;

    -o-transform-origin:left bottom;

}

结果如下图

 

 

Transform-origin：属性可以有left center right  top bottom