CSS反向框

Question

嗨，我想把它颠倒过来，我的意思是，当我将光标悬停在关闭状态时，它会从最后一个立方体开始“打包”，但我不知道如何正确地做，现在我只是在学习html 和 css 所以我很乐意看到如何做一些解释）） 它看起来仍然不错，但如果悬停后反向过渡，那就完美了。

* {
  margin: 0;
}

.main>div {
  font-family: "Comfortaa";
  border: none;
  margin: auto;
  padding: 25px 25px 25px 25px;
  text-align: center;
  float: left;
}

.main:hover>#t {
  padding: 20px 20px 50px 20px;
}

.main:hover>#r {
  padding: 20px 20px 75px 20px;
}

.main:hover>#o {
  padding: 20px 20px 100px 20px;
}

.main:hover>#c {
  padding: 20px 20px 125px 20px;
}

.main:hover>#h {
  padding: 20px 20px 150px 20px;
}

.main:hover>#e {
  padding: 20px 20px 175px 20px;
}

.main:hover>#j {
  padding: 20px 20px 200px 20px;
}

#t {
  background-color: lightcoral;
  transition: padding 500ms;
}

#r {
  background-color: LightSalmon;
  transition: padding 500ms 0.5s;
}

#o {
  background-color: PapayaWhip;
  transition: padding 500ms 1s;
}

#c {
  background-color: PaleGreen;
  transition: padding 500ms 1.5s;
}

#h {
  background-color: LightCyan;
  transition: padding 500ms 2s;
}

#e {
  background-color: LightSkyBlue;
  transition: padding 500ms 2.5s;
}

#j {
  background-color: MediumPurple;
  transition: padding 500ms 3s;
}

<div class="main">
  <div id="t">T</div>
  <div id="r">R</div>
  <div id="o">O</div>
  <div id="c">C</div>
  <div id="h">H</div>
  <div id="e">E</div>
  <div id="j">J</div>
</div>