Não entendi o pq do top e left

No exercício de criação do cubo 3D não entendi do por que do left e top tanto na classe face quanto na classe cubo no css. Se alguém puder me esclarecer :)

HTML

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

CSS

.face {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
}
.frente {
    background-color: red;
    transform: translateZ(50px);
}
.direita {
    background-color: black;
    transform: translateX(50px) rotateY(90deg);
}
.esquerda {
    background-color: orange;
    transform: translateX(-50px) rotateY(-90deg);
}
.cima {
    background-color: yellow;
    transform: translateY(50px) rotateX(90deg);
}
.baixo {
    background-color: green;
    transform: translateY(-50px) rotateX(-90deg);
} 
.tras {
    background-color: blue;
    transform: translateZ(-50px) rotateX(180deg);
}    

.cubo {
    transform-style: preserve-3d;
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    transform: rotateX(10deg) rotateY(10deg);
}