css3 - 变形处理 transform

在css3中可以利用transform功能来实现文字图像的旋转、缩放、倾斜、移动这四种类型的变形处理

兼容性：

浏览器	Safari	Chrome 8+	Firefox 4+	Opera 10+
各个浏览器写法	-webkit-transform	-webkit-transform	-moz-transform	-o-transform

1.旋转 rotate

html：

<div>示例文字</div>

css：

div {
width: 250px;
background-color: pink;
text-align: center;
margin: 200px auto;

-webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/
-moz-transform: rotate(45deg);/*兼容Firefox*/
-o-transform: rotate(45deg);/*兼容Opera*/
}

解析：

rotate(45deg)

含义：rotate是旋转，45deg是旋转角度；旋转方向为顺时针；

2.缩放 scale

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率，例如：scale(0.5)表示缩小50%；







html：

<div>示例文字</div>

css：

div {
width: 250px;
background-color: pink;
text-align: center;

-webkit-transform: scale(0.5);/*兼容Chrome、Safari*/
-moz-transform: scale(0.5);/*兼容Firefox*/
-o-transform: scale(0.5);/*兼容Opera*/
}

解析：

图一是原图，没有任何缩放；

图二是缩小50%；

图三是X轴缩小50%，Y轴放大2倍；即：

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

3.倾斜 skew

使用skew方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向倾斜角度、垂直方向倾斜角度，例如：skew(30deg,40deg)表示水平方向倾斜30度，垂直方向倾斜40度；





html：

<div>示例文字</div>

css：

div {
width: 200px;
background-color: pink;
text-align: center;

-webkit-transform: skew(30deg,30deg);/*兼容Chrome、Safari*/
-moz-transform: skew(30deg,30deg);/*兼容Firefox*/
-o-transform: skew(30deg,30deg);/*兼容Opera*/
}

解析：如果skew():中参数只写一个，代表只在水平方向上进行倾斜，垂直方向上不倾斜；如图二；

4.移动 translate

使用translate方法来实现文字或图像的移动处理，在参数中分别指定水平方向移动距离、垂直方向移动距离，例如：translate(50px,50px)表示水平方向移动50px，垂直方向移动50px；

css：

div {
width: 200px;
background-color: pink;
text-align: center;

-webkit-transform: translate(50px,50px);/*兼容Chrome、Safari*/
-moz-transform: translate(50px,50px);/*兼容Firefox*/
-o-transform: translate(50px,50px);/*兼容Opera*/
}

5.综合使用

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用

transform-origin

属性，可以改变变形的基准点。





html:

<div class="a"></div>
<div class="b"></div>

第一张图不修改基准点的css：

div {
display: inline-block;
width: 100px;
height: 100px;
}
div.a {
background-color: pink;
}
div.b {
background-color: green;

-webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/
-moz-transform: rotate(45deg);/*兼容Firefox*/
-o-transform: rotate(45deg);/*兼容Opera*/
}

第二张修改基准点的css：

div {
display: inline-block;
width: 100px;
height: 100px;
}
div.a {
background-color: pink;
}
div.b {
background-color: green;

-webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/
-moz-transform: rotate(45deg);/*兼容Firefox*/
-o-transform: rotate(45deg);/*兼容Opera*/
/*修改变形基准点*/
-webkit-transform-origin: left bottom;/*兼容Chrome、Safari*/
-moz-transform-origin: left bottom;/*兼容Firefox*/
-o-transform-origin: left bottom;/*兼容Opera*/
}

解析：

transform-origin参数分别是：基准点在水平方向上的位置(left、center、right)、基准点在垂直方向上的位置(top、center、bottom)；

其中 水平方向上的位置中可取值为：left、center、right;

垂直方向上的位置中可取值为：top、center、bottom;