Question

我已经找到了一个动画，可以向前移动图像，同时翻转和增长，给人一种前进的印象。我尝试在photoshop中创建这个，但是我无法解决它占用的空间问题，破坏了页面上其他更重要的项目。我试过调整http://www.the-art-of-web.com/css/css-animation/中的'火箭'但是不知道添加翻转我会添加图像以显示我想要做的事情。 - 好吧，似乎我没有足够的声誉发布图像，但我不知道如何获得声誉！图像会从左到右连续出现。

这不是我将要使用的图像，而是演示我需要的图像。我将使用的是版权。除了前中心图像之外的所有图像都是相同的图像（当我使用我的原始图像时，前面将有四个不同的图像）。

非常感谢任何帮助。

Answer 1

＆＃13;

setTimeout(function() {
  var thething = document.querySelector('.thething');
  thething.style.transform = 'perspective(500px) rotateY(80deg) translateX(-500px)';
 }, 1000);

＆＃13;

.thething {
  background-color: red;
  transition: transform 5s;
  transform: perspective(500px) rotateY(80deg);
  height: 200px;
  width: 500px;
  margin-top: 100px;
}

＆＃13;

<div class="thething"></div>

＆＃13;

这通常是制作动画所需要的;我知道它并不像你在评论中描述的那么复杂，但在很大程度上它会涉及大量繁琐的工作并改变数字。让我知道，如果在这里有任何重要的事情，你在理论化方法上遇到了麻烦。

动画将图像向前移动，同时翻转，给人以前进的印象

1 个答案: