html在中打开变形,CSS3中的变形处理

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜和移动着4种类型的变形处理。

transform功能的基础知识

在CSS3中，通过transform属性来使用transform功能。

transform功能分类

旋转

使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。

div{

width: 300px;

margin: 150px auto;

background-color: yellow;

text-align: center;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

示例文字

运行效果：

缩放

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

div{

width:300px;

margin:150px auto;

background-color:yellow;

text-align:center;

transform:scale(0.5);

-webkit-transform:scale(0.5);

-moz-transform:scale(0.5);

-o-transform:scale(0.5);

}

示例文字

上面的示例使div元素缩小了50%。

另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

div{

width:300px;

margin:150px auto;

background-color:yellow;

text-align:center;

transform:scale(0.5,2);

-webkit-transform:scale(0.5,2);

-moz-transform:scale(0.5,2);

-o-transform:scale(0.5,2);

}

示例文字

上面的示例使div元素水平方向缩小了50%，垂直方向放大了一倍。

效果如图：

倾斜

使用skew方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

div{

width: 300px;

margin: 150px auto;

background-color: yellow;

text-align: center;

transform: skew(30deg,30deg);

-webkit-transform: skew(30deg,30deg);

-moz-transform: skew(30deg,30deg);

-o-transform: skew(30deg,30deg);

}

示例文字

上面的示例使div元素水平方向上倾斜了30度，垂直方向上倾斜了30度。

效果如图：

另外， skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

移动

使用translate方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

div{

width:300px;

margin:150px auto;

background-color:yellow;

text-align:center;

transform:translate(50px,50px);

-webkit-transform:translate(50px,50px);

-moz-transform:translate(50px,50px);

-o-transform:translate(50px,50px);

}

示例文字

上面的示例把div元素水平方向上向右移动了50px，垂直方向上向上移动了50px。

另外，translate方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。

对一个元素使用多种变形的方法

变形示例

示例1：

// 先移动，然后旋转，最后缩放

div{

width: 300px;

background-color: yellow;

text-align: center;

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

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

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

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

}

示例文字

效果如图：

示例2：

// 先旋转，然后缩放，最后移动

div{

width: 300px;

background-color: yellow;

text-align: center;

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

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

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

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

}

示例文字

效果如图：

这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明transform参数的顺序不同，结果可能会不一样。

指定变形的基准点

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

// 不改变基准点，并将第二个div元素进行旋转

div{

width: 200px;

height:200px;

display:inline-block;

}

div#a{

background-color: pink;

}

div#b{

background-color: green;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

接下来，我们使用transform-origin属性把变形的基准点修改为第二个元素的左下角处。

// 将基准点修改为第二个div元素的左下角

div#b{

background-color: green;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

//修改变形基准点

transform-origin: left bottom;

-webkit-transform-origin: left bottom;

-moz-transform-origin: left bottom;

-o-transform-origin: left bottom;

}

运行效果：

不改变基准点

改变基准点

transform-origin属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为left、center、right， "基准点在元素垂直方向上的位置"中可以指定的值为top、center、bottom。