CSS3中的变形处理

浏览数：19 / 时间：2015年06月09日

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

旋转

旋转功能使用rotate方法参数中加入角度值，方向为顺时针旋转。示例清单如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rotate使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

效果图：

缩放

使用scale方法来实现文字或图像的缩放处理，参数为水平缩小度数和垂直放大倍数。示例清单如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:scale(0.5,2);
-moz-transform:scale(0.5,2);
-o-transform:scale(0.5,2);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

效果图：

倾斜

使用skew实现倾斜效果，参数为水平和垂直倾斜30度。示例清单如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:skew(30deg,30deg);
-moz-transform:skew(30deg,30deg);
-o-transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

效果图：

移动

使用translate，参数为水平向上和垂直向上移动50px。示例清单如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-o-transform:translate(50px,50px);
}
</style>
</head>
<body>
　　<div>示例文字</div>
</body>
</html>

效果图：

对一个元素使用多种变形。示例清单如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-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);
}
</style>
</head>
<body>
　　<div>示例文字</div>
</body>
</html>