更改变换原点

2022-04-27  本文已影响0人  迷失的信徒

基本上来说变换都是围绕着原点来进行的;而这个原点默认情况下是元素的中心
我们可以通过属性transform-origin来更改转换的原点;如下

.origin{
        width: 200px;
        height: 200px;
        border: 1px solid green;
        transform: rotate(20deg);
        transform-origin: center bottom;
        //ransform-origin: 20px bottom; 
        //transform-origin: 30% 20%;
    }

transform-origin属性默认为transform-origin: center center或者transform-origin: 50% 50%
变换原点:就是在二维中取X/Y轴上的两个值,以确定原点的位置。

我们可以通过更改其percentage/百分比或者center、left、top、bottom、right亦或者lengths来更改原点。
但最准确的方法还是使用关键字

上一篇 下一篇

猜你喜欢

热点阅读