我正在從頭開始構建“3D 旋轉木馬”。
輪播包含 3 張幻燈片，它們使用 CSS Grid 相互堆疊（它們都具有相同的grid-area: 1/1）。
幻燈片 1 停留在轉盤的中心。
我正在使用平移來偏移幻燈片 2（向左）和 3（向右），從而提供基本的 3D 效果。
我希望我的旋轉木馬的容器完全適合內容（3張幻燈片），所以我在旋轉木馬的左側和右側設定了一個填充，以彌補幻燈片 2 和 3 的“溢位”。
到目前為止，我的填充正好等于幻燈片 2 和 3 的偏移量。（如果我translateX(-100px)的幻燈片 2，apadding-left: 100px作業正常。
當我scale(0.5)的幻燈片 2 和 3 變得更加棘手：填充的值已關閉，我可以手動找到一個有效的值，但我找不到每次我想更改主幻燈片寬度時都適合的公式，偏移量或比例因子。
我制作了一個 Codepen 來說明這個問題，它發生在小于 1024px 的位置（您必須調整視窗大小才能看到問題。
https://codepen.io/AymarTissedre/pen/gOKMEwa
顯示代碼片段
window.onload = function (event) {
document.querySelector("span").innerHTML = window.innerWidth 'px'
};
window.onresize = function (event) {
document.querySelector("span").innerHTML = window.innerWidth 'px';
};* {
box-sizing: border-box;
}
div {
--offset: 100px;
--scaling: 0.75;
--width: 200px;
--padding: calc(
var(--width) / 2 * var(--scaling)
);
border: 1px dashed black;
background: lightgrey;
display: inline-flex;
width: var(--width);
padding: 0 var(--padding);
box-sizing: content-box;
}
div ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
}
@media screen and (max-width: 1025px) {
div ul {
--offset: 75px;
--scaling: 0.75;
--width: 150px;
}
}
div ul li {
grid-area: 1/1;
border: 1px solid black;
width: 200px;
height: 200px;
}
div ul li:nth-child(1) {
background-color: red;
z-index: 1;
}
div ul li:nth-child(2) {
background-color: blue;
transform: translateX(var(--offset)) scale(var(--scaling));
}
div ul li:nth-child(3) {
background-color: green;
transform: translateX(calc(var(--offset) * -1)) scale(var(--scaling));
}<div>
<ul>
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
</ul>
</div>
<p>At less than 1024px resolution wide, padding is not correctly calculated (width of the Card 1 changes, offset of Cards 2 and 3 too.)</p>
<p>The padding (lightgrey zone) should <strong>NOT</strong> be visible at the left / right side under 1024 pixels </p>
<p> Current viewport width: <span></span> </p>這是我手動找到的填充值串列，與相應的寬度、偏移量和縮放比例完美匹配。我沒能找到鏈接它們的通用公式。請注意，這些值可能會四舍五入（例如 68px = 67.5px）。
// width(px) offset(px) scaling padding(px)
// 150 50 0.50 = 12
// 300 100 0.50 = 25
// 200 100 0.50 = 50
// 150 100 0.50 = 62
// 350 150 0.50 = 62
// 250 100 0.75 = 68
// 300 175 0.50 = 100
// 300 200 0.50 = 125
// 300 200 0.75 = 162
如果需要，很高興提供更多詳細資訊。
uj5u.com熱心網友回復：
公式應該是：
--padding: calc(var(--offset) - var(--width)*(1 - var(--scaling))/2)
從偏移中洗掉非縮放元素和縮放元素之間的差異（1 - var(--scaling)）然后除以 2，因為我們只洗掉一側。
還要確保更新divnot上的變數，ul因為填充和寬度是在div
window.onload = function (event) {
document.querySelector("span").innerHTML = window.innerWidth 'px'
};
window.onresize = function (event) {
document.querySelector("span").innerHTML = window.innerWidth 'px';
};* {
box-sizing: border-box;
}
div {
--offset: 100px;
--scaling: 0.75;
--width: 200px;
--padding: calc(var(--offset) - var(--width)*(1 - var(--scaling))/2);
border: 1px dashed black;
background: lightgrey;
display: inline-flex;
width: var(--width);
padding: 0 var(--padding);
box-sizing: content-box;
}
div ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
width: 100%;
}
@media screen and (max-width: 1025px) {
div {
--offset: 75px;
--scaling: 0.75;
--width: 150px;
}
}
div ul li {
grid-area: 1/1;
border: 1px solid black;
aspect-ratio:1;
}
div ul li:nth-child(1) {
background-color: red;
z-index: 1;
}
div ul li:nth-child(2) {
background-color: blue;
transform: translateX(var(--offset)) scale(var(--scaling));
}
div ul li:nth-child(3) {
background-color: green;
transform: translateX(calc(var(--offset) * -1)) scale(var(--scaling));
}<div>
<ul>
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
</ul>
</div>
<p>At less than 1024px resolution wide, padding is not correctly calculated (width of the Card 1 changes, offset of Cards 2 and 3 too.)</p>
<p>The padding (lightgrey zone) should <strong>NOT</strong> be visible at the left / right side under 1024 pixels </p>
<p> Current viewport width: <span></span> </p>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528404.html
標籤：css数学粗鲁的几何学
上一篇：我如何得到這個數學舍入？