jquery - 使图像看起来好像越来越近 - CSS Perspective？

Question

我正在尝试为主屏幕上的图像(飞机飞行)制作动画，并想让它看起来好像飞机从远处开始，随着时间的推移越来越近。

我将两张图像叠加在一起以创建 3D 效果，并且能够成功地为“天空”背景制作动画，使其看起来就像飞机在移动一样。我可以使用 animate.css 轻松地为飞机设置动画，使其从上方或下方飞入，但我更希望实现的是一种透视。我玩过透视属性，但还没有让它以任何合理的方式工作。

当我尝试缩放飞机的 img 时，我从一个负数开始(所做的只是将 img 上下颠倒)。从 1 开始并缩放到更高并不能真正使飞机看起来好像从远处开始变小并随着它接近观察者而变大。

对此有什么想法吗？

.jumbotron {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../img/fluffy-cloud-cloudscape-sky-584414.jpeg');
  background-size: cover;
  z-index: 1;
  background-position: 0px 0px;
  background-repeat: repeat-y;
  animation: animatedBackground 3s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 1510px;
  }
  to {
    background-position: 0 0;
  }
}

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <img src="assets/img/stealth.png" alt="">
  </div>
</div>

飞机 img 没有 CSS，因为还没有任何东西可以接近实现这种效果。

当背景图片以其无限动画变化时，也希望这个边框消失。

Answer 1

您可以动画平面img的宽度和高度:

body {width:100%;margin:0}

.jumbotron {
  /*z-index: 1; the element needs to be positioned anything else other than static to be taken into account */
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url('/image/fk18j.png') repeat-y;
    background-size: cover;
    background-position: 0px 0px;
    animation: animateBackground 3s linear infinite; 
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container > img {
  display: block;
  animation: animatePlate 3s linear infinite; 
}

@keyframes animatePlate {
  from {
    width: 0;
    height: 0;
  }
  to {
    width: 300px;
    height: 300px;
  }
}

@keyframes animateBackground {
  from {
    background-position: 0 1510px;
  }
  to {
    background-position: 0 0;
  }
}

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <img src="https://cdn.officialpsds.com/imageview/78/5z/785z6w_large.png?1395542934" alt="">
  </div>
</div>