2d转换缩放与旋转
## 本章将介绍简单的2d缩放的实现，并且举几个简单的应用案例。 No.1缩放属性
在这里插入图片描述
在这里插入图片描述
直接上代码
<body>
<div class="m">
</div>
<body>* {
margin: 0;
padding: 0;
}
.m {
height: 500px;
width: 500px;
margin: 100px auto;
background-color: pink;
}
.m:hover {
/* transform: scale(0.5, 0.5); */
transform: scale(0.5);
}这是图片的缩放，为何我们不直接改width和height,因为这种方法改出来的图形不是等比缩放，破坏了网页制作的美观，transform比较方便和美观。 transform: scale(x,y) x 和 y分别等于数字，大于一就是放大，小于一就是缩小，很好应用，缩放属性是相对于中心点，默认的中心点为盒子的中心。 scale属性还有一种好处便是不影响其他的盒子，不会覆盖。
No.2旋转属性 transform: rotate(45deg); 上代码，可以去vscode来打一打代码。
<img src="可爱.png" alt="">img {
width: 200px;
height: 200px;
border: 5px solid pink;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0.5s;
}
img:hover {
transform: rotate(360deg);
}No.3中心点属性
.m {
height: 500px;
width: 500px;
margin: 100px auto;
background-color: pink;
transform-origin: left bottom;
transition: all 1s;
}
.m:hover {
/* transform: scale(0.5, 0.5); */
transform: scale(0.5, 0.5);
}这段代码与上面的那串代码一样，但是多了两行，一个是动画效果，还有一个就是中心的改变，中心点由默认的中间改变到了左下角，所以这种缩放便不是等比缩放。动态效果笔者没法演示，代码可以是一边，会收益匪浅，每天一个小技巧。 注意点： transform-origin: 后面可以填left,bottom,right,top,center transform-origin:50% 50%； transform-origin:50px 50px； 这几种方式也是可以的，期待你去验证。 前端知识很杂，需要多多积累。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读