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

First let me point out that a skew angle should be between -90deg and 90deg, non-inclusive. All of your skews fall way outside this range.

Limiting myself to sensible skew numbers, it turned out to be quite simple:

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.tile {
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  position: absolute;
}
.square{
  transform: skewY(30deg);
  top: 43px;
}
.square2{
  transform: skewY(-30deg);
  left:102px;
  top: 43px;
}
.square3{
  height: 58px;
  left: 50px;
  top: -18px;
  transform: skew(60deg, -30deg);
}

Job done. I've also tidied up the huge repetition of styles into a common class for you.