html - How to create a 3D cuboid

Question

I am trying to create a 3D cuboid but somehow unable to fix the places of the faces which when animated looks broken. I have worked on cubes before but different sized sides are a little problematic to understand. Here is the code

.ub-front{
  transform:  rotateY(0deg) translateZ(160px);
}

.ub-back{
  transform: rotateY(180deg) translateZ(-160px);
}

.ub-right{
  transform: rotateY(90deg) translateZ(160px);
}

.ub-bottom{
  transform: rotateX(-90deg) translateZ(160px);
}

.ub-top{
  transform: rotateX(90deg) translateZ(160px);
}

.ub-left{
  transform: rotateY(-90deg) translateZ(160px);
}

.ub-ur{
  width: 320px;
  height: 250px;
  position: absolute;
}

question from:https://stackoverflow.com/questions/66060331/how-to-create-a-3d-cuboid

Answer 1

Waitting for answers