动画css 3D中的图像以对角移动页面

Question

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

到目前为止，我让它们从左向右移动，但我不确定如何使用translate3D让它们向这个方向移动。这是一个显示我想要实现的目标的网站：http://futurewatercity.com/（您必须使用箭头点击他们的地图）

这是我的代码：

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