2d转换缩放与旋转_2d缩放-CSDN博客

本文链接：https://blog.csdn.net/weixin_54719957/article/details/114612373

## 本章将介绍简单的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；
这几种方式也是可以的，期待你去验证。
前端知识很杂，需要多多积累。