CSS动画从左到右看起来越来越近&越来越远，模拟转盘上的玻璃杯的运动

jexiocij 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(193)

我试图创建一个CSS动画，从左到右水平移动，同时似乎越来越近，越来越远，模拟从前面观看转盘上的玻璃运动。
我已经接近了，但它仍然看起来不正确，看起来像是沿着钻石形状而不是圆形行进。
这就是我所尝试的。

.roll {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px auto 10px auto;
  animation: roll 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@keyframes roll {
  0%,
  100% {
    transform: translateX(0%) scale(1);
  }
  20% {
    transform: translateX(50%) scale(0.8);
  }
  50% {
    transform: translateX(0%) scale(0.6);
  }
  80% {
    transform: translateX(-50%) scale(0.8);
  }
}

<div class="roll"></div>

css

来源：https://stackoverflow.com/questions/76152681/css-animation-from-left-to-right-appearing-to-get-closer-further-away-simulat

2条答案

按热度按时间

wpcxdonn1#

如果你想在一个水平面圆上制作正方形的动画，并保持它面向观察者，你可以在一个 Package 元素上使用3d变换，并在正方形上反转它，使它保持面向观察者。
关键是在Y轴上旋转元素，就像“在真实的生活中”一样。
下面是一个例子：

.wrap {
  width: 100px;
  height: 100px;  
  margin: 50px auto 50px auto;
  animation: roll 2s linear infinite;
  transform-origin: 50% 50% -250px;
  transform-style: preserve-3d;
}
.roll {
  width: inherit;
  height: inherit;
  background: red;
  animation: roll 2s linear infinite reverse;
  transform-origin: 50% 50% 0;
}

@keyframes roll {
  from { transform:  perspective(1200px) rotateY(0deg);}
  to { transform:  perspective(1200px) rotateY(-360deg);}
}

<div class="wrap">
  <div class="roll"></div>
</div>

请注意，您需要使用transform-style: preserve-3d;（more info on MDN）

赞(0）回复(0）举报 2023-05-08

wh6knrhe2#

您可以通过使用z轴来实现此3d效果。看一看：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ

div {
  width: 50px;
  height: 50px;
  margin: auto;
  background: tomato;
  perspective: 500px;
  transform-style: preserve-3d;
  animation: roll 2s linear infinite;
}

@keyframes roll {
  0% {
    transform: rotateY(0deg) translatez(110px) scale(1);
  }
  50% {
    transform: rotateY(180deg) translatez(110px) scale(0.5)
  }
  100% {
    transform: rotateY(360deg) translatez(110px) scale(1);
  }
}

<div></div>

赞(0）回复(0）举报 2023-05-08

我来回答

CSS动画从左到右看起来越来越近&越来越远，模拟转盘上的玻璃杯的运动

2条答案

相关问题

热门标签

最新问答