css - 使用 CSS 转换的伪 3d 效果？

Question

我有一个包含小 div 的 div，每个小 div 都有一个彩色球的 background-image:

<div class="container">
  <div class="ball" style="left: 100px; top: 50px;">
  <div class="ball" style="left: 120px; top: 100px;">
  <div class="ball" style="left: 140px; top: 150px;">
  <div class="ball" style="left: 160px; top: 200px;">
  <div class="ball" style="left: 180px; top: 250px;">
</div>

现在我想创建某种伪 3D 效果，其中 'top' 值越小的球越小，离底部越近的球看起来越大。

我已经阅读了一些关于 CSS3 变换和透视的内容，但我不知道该怎么做。

有什么方法可以根据 top 调整 div 的 width 和 height -属性(property)？

Answer 1

您可以像这样创建一个变量来在 css 中存储最高值 style="--top: 10px" 并在以后像这样使用它 var(--top).

更新

您需要使用 JavaScript 使用 setProperty 方法设置 --top 属性，您可以使用 --top 获取值getPropertyValue 方法。请参阅动态更改 --top onclick 事件的示例，该事件会更改 --top 值以及 width 和 height会自动调整。

代码片段

balls = document.getElementsByClassName('ball');

Array.prototype.forEach.call(balls, function(ball){
	ball.onclick = function() {
		ball.style.setProperty('--top', parseInt(ball.style.getPropertyValue('--top')) * 1.2 + 'px')
  }
})

.ball {
    background-image:url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Soccer_ball.svg);
    width: calc(var(--top) * 1.2);
    height: calc(var(--top) * 1.2);
    background-size: cover;
    position: absolute;
}

<div class="container">
  <div class="ball" style="left: 100px; --top: 50px;"></div>
  <div class="ball" style="left: 120px; --top: 100px;"></div>
  <div class="ball" style="left: 140px; --top: 150px;"></div>
  <div class="ball" style="left: 160px; --top: 200px;"></div>
  <div class="ball" style="left: 180px; --top: 250px;"></div>
</div>