Question

我有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效果，其中“顶部”值较小的球体较小，底部较近的球体较大。

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

有没有办法根据width属性来调整height的{{1}}和div？

Answer 1

您可以创建一个变量来存储css中的最高值，例如style="--top: 10px"，然后像var(--top)一样使用它。

<强>更新

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

代码段

＆＃13;

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')
  }
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以在包含元素上设置实际的3D变换：

.container {
    width: 400px;
    height: 300px;
    position: relative;
  perspective: 300px;
}

.inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform:  rotateX(60deg);
    transform-style: preserve-3d;
    border: solid 2px green;
}

.ball {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: lightblue;
    position: absolute;
    transform:  rotateX(-60deg);
    transform-style: preserve-3d;
}

<div class="container">
<div class="inner">
  <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>
</div>

CSS改造的伪3d效果？

2 个答案: