我有一個元素必須從左側縮放 100 像素，同時已經具有 0.5 的比例。轉換原點時，它位于左側 50 像素處，并從線的錯誤一側縮放。
縮放元素時，我希望它從紫色線縮放。不使用左 CSS 屬性。
我嘗試使用這個公式，但它有點偏離：
x (x * 比例)
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 100px;
height: 100px;
margin-top: -10px;
}
.example-initial {
background: blue;
transform: scale(0.2);
transform-origin: 100px 0px;
}
.example-wrong {
background: green;
transform: scale(0.5);
transform-origin: 100px 0px;
}
.example-right {
background: red;
transform: scale(0.5);
transform-origin: 200px 0px;
}
.transform-origin-line-example {
position: absolute;
left: 100px;
width: 1px;
height: 200px;
background: purple;
top: 0;
}<div class="example-initial box"></div>
<div class="example-wrong box"></div>
<div class="example-right box"></div>
<div class="transform-origin-line-example"></div>uj5u.com熱心網友回復：
您正在尋找的公式是：
(x * (1 / (1 - 0.1));
x是左邊的位置。
1是滿量程。
0.1是使用的比例。
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
background: red;
width: 100px;
height: 100px;
transform: scale(0.1);
transform-origin: calc(100px * (1 / 0.9)) 0px;
}
.example-box {
position: relative;
background: blue;
width: 100px;
height: 100px;
transform: scale(0.5);
transform-origin: calc(100px * (1 / 0.5)) 0px;
}
.transform-origin-line-example {
position: absolute;
left: 100px;
width: 1px;
height: 200px;
background: green;
top: 0;
}<div class="box"></div>
<div class="example-box"></div>
<div class="transform-origin-line-example"></div>uj5u.com熱心網友回復：
您可以將 transform-origin 代碼修復為
transform: scale(-0.5);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/524668.html