Aula 4 - Atividade 9 - perspective e transform: rotate()

Boa tarde!

Fiz o cubo proposto na aula. Mas estou com dúvidas em relação às propriedades perspective e transform: rotate().

A primeira dúvida é sobre o perspective. Acontece que quando faço transform: rotateX(90deg) por exemplo, com o perspective na classe cubo, o desenho fica deformado. E quando tiro o perspective da classe cubo e o coloco na classe fundo, ele fica proporcional ao rotacionar. Por quê isso acontece?

E a segunda dúvida é: por quê ao rotacionar o objeto, ele não fica parado no mesmo lugar como o do professor?

html

<div class="fundo">
  <div class="cubo">
    <div class="face frente">frente</div>
    <div class="face direita">direita</div>
    <div class="face esquerda">esquerda</div>
    <div class="face baixo">baixo</div>
    <div class="face cima">cima</div>
    <div class="face tras">tras</div>
  </div>
</div>

css

.fundo{
  width: 744px;
  height: 516px;
  background-color: black;
  perspective:800px;
}
.cubo{
  position: relative;
  top: 200px;
  left: 300px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(45deg);
 }
.face{
  position: absolute;
  display:block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: center;
  opacity: 0.5;
  border: 1px solid white;
  color: white
}
.frente{
  background-color: darkgreen;
  transform: translateZ(100px);
}
.direita{
  background-color: darkgreen;
  transform: translateZ(50px) translateX(50px) rotateY(90deg);
}
.esquerda{
  background-color: darkgreen;
  transform: translateZ(50px) translateX(-50px) rotateY(-90deg);
}
.baixo{
  background-color: darkgreen;
  transform: translateZ(50px) translateY(50px) rotateX(-90deg)
}
.cima{
  background-color: darkgreen;
  transform: translateZ(50px) translateY(-50px) rotateX(90deg)
}
.tras{
  background-color: darkgreen;
  transform: rotateY(180deg)
}

Por favor, alguém pode me ajudar? =]