CSS3中的变形处理

最新推荐文章于 2023-05-14 23:15:46 发布

weixin_30512089

最新推荐文章于 2023-05-14 23:15:46 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/itsnail/p/3514798.html

版权

在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>

效果图：

说明：第一张图为未变形前，后一张为变形后。

转载于:https://www.cnblogs.com/itsnail/p/3514798.html

weixin_30512089

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的变形处理

在css3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种类型的变形处理。旋转旋转功能使用rotate方法参数中加入角度值，方向为顺时针旋转。示例清单如下：<!DOCTYPE html><html><head><meta charset="utf-8" /><title&...
复制链接

扫一扫