transform样式的学习包含四个属性：translate平移，rotate旋转，scale缩放，skew斜切

最新推荐文章于 2024-07-26 09:56:47 发布

￥诸葛村夫￥

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量3k

点赞数 1

分类专栏：前端学习笔记文章标签： transform translate scale skew rotate

本文链接：https://blog.csdn.net/qq_33322074/article/details/79676394

版权

前端学习笔记专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>transform样式的使用</title>






<style>
div{
width: 100px;
height: 100px;
background-color: #999;
margin-top:20px;
}
.pingyi{
transform:translate(100px,200px);
}
.xuanzhuan{
transform:rotate(45deg);
transform-origin: 0 0;/*将旋转点放到左上角*/
}
.suofang{
transform: scale(0.5 ,0.5);
}
.xieqie{
transform:skew(30deg);
}
</style>
</head>
<body>
<div class="pingyi">

</div>
<div class="xuanzhuan"></div>
<div class="suofang"></div>
<div class="xieqie"></div>
</body>
</html>