html - css 3D で画像をアニメーション化してページを斜めに移動する

Question

Web サイトでいくつかの雲をアニメートして、ページ上を斜めに移動するようにしています (画面の左上から始まり、画面の右下で終わります)。

これまでのところ、左から右に移動していますが、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);}
}