Html 在css 3D中设置图像动画，使其在页面上沿对角线移动

我试图在我的网站上设置一些云的动画，使它们在页面上沿对角线移动（从左上角的屏幕开始，到右下角的屏幕结束）

到目前为止，我已经让它们从左向右移动，但我不知道如何使用translate3D让它们朝这个方向移动。这里有一个网站显示了我想要实现的目标：（你必须用箭头点击他们的地图）

这是我的代码：

<div class="sky">
  <div class="cloud cloud01"></div>
  <div class="cloud cloud02"></div>
</div>

.cloud {
  width: 512px;
  height: 512px;
  transform: scale(0.25);
  position: absolute;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds01.png) 0 0 no-repeat;
}

.cloud01 {
  top: 10px;
  z-index: 100;
  transform: scale(0.35);
  animation: drift 25s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 100;
  transform: scale(0.5);
  animation: drift 35s linear infinite;
}

@keyframes drift {
  from {transform: translateX(-355px);}
  to {transform: translateX(1350px);}
}

.云{
宽度：512px；
高度：512px；
变换：比例（0.25）；
位置：绝对位置；
背景：url（file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds01.png）0 0无重复；
}
.cloud01{
顶部：10px；
z指数：100；
变换：比例（0.35）；
动画：漂移25秒线性无限；
}
.cloud02{
顶部：10px；
z指数：100；
变换：比例（0.5）；
动画：漂移35s线性无限；
}
@关键帧漂移{
来自{transform:translateX（-355px）；}
到{transform:translateX（1350px）；}
}

您可能不希望对此进行变换…而希望为定位设置动画您可能不希望对此进行变换…而希望为定位设置动画