How to create cube with only HTML and CSS?

Question

I have this and I want to make a cube with HTML & CSS only like in the above image. My best try:

Answer 1

Basically, you want to do 2 transformations:

1. rotate the rectangle
2. squeeze it (skew it)

so basically, you need to do a transform: rotate(x) skew(y, y) and play a bit with size and placing.

here's a little demo I created, based on your own demo:

(I did remove the borders since they felt unneeded to me)

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:110px;
  height:110px;
  background:#c52329;
  float:left;
  transform: rotate(45deg) skew(-15deg, -15deg);
  position: absolute;
  left: 46px;
  top: -42px;
}