Si encuentras algún detalle que no comprendes nos puedes dejar un comentario y te responderemos lo más rápido posible.

Solución:

De acuerdo con su HTML, obtengo este JSFiddle. acabo de jugar con transform.

.mainDiv
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;

.square
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;

.square2
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;

.square3
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
 

transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;

CSS actualizado

.square3
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;

Cambié transform CSS con esto.

---

Extra: David Walsh tiene una genial versión animada en un cubo. Aparte del hecho de que se ve un poco genial, jugando con la configuración puedes aprender mucho al respecto.

También puedes lograr un cubo con Transformaciones 3d. Esto le dará a tu cubo una perspectiva más realista. Como si el cubo fuera una forma 3D real como esta:

A continuación, utilicé un div con 2 pseudo elementos:

body 
  perspective: 900px;
  padding-bottom:50%;

div 
  position: relative;
  width: 20%;
  padding-bottom: 20%;
  margin: 0 auto;
  transform-style: preserve-3d;
  background: #C52329;
  transform: rotateX(60deg) rotatez(45deg);

div:before, div:after 
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: -2% -2%;
  background: inherit;

div:before 
  top: 104%; left: 0;
  transform: rotateX(-90deg);

div:after 
  top: 0; left: 104%;
  transform: rotateY(90deg);

CSS cubo 3d con 6 caras:

Esta técnica te permite hacer un “cubo real” con 6 caras:

body
  perspective-origin:50% -100%;
  perspective: 900px;
  overflow:hidden;

h1position:absolute;font-family:sans-serif;
.cube 
  position:relative;
  padding-bottom:20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform:rotateY(45deg) rotateX(0);
  transition:transform 3s;

.cubeFace 
  position: absolute;
  left:40%;top:0;
  width: 20%;height:100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow:inset 0 0 0 5px #fff; 
  transform-origin:50% 50%;
  transform: rotateX(90deg);
  backface-visibility:hidden;

.face2
  transform-origin:50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);

.cubeFace:before, .cubeFace:after 
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin:0 0;
  background: inherit;
  box-shadow:inherit;
  backface-visibility:inherit;

.cubeFace:before 
  top: 100%; left: 0;
  transform: rotateX(-90deg);

.cubeFace:after 
  top: 0; left: 100%;
  transform: rotateY(90deg);


body:hover .cube
  transform:rotateY(405deg) rotateX(360deg);

Hover me:

  

  

Tenga en cuenta que no agregué los prefijos del proveedor en los ejemplos. Para obtener más información sobre la compatibilidad con navegadores y qué prefijos de proveedores se necesitan según su público objetivo, consulte canIuse for 3d transforms.

Básicamente, quieres hacer 2 transformaciones:

1. girar el rectángulo
2. apretarlo (torcerlo)

así que básicamente, necesitas hacer un transform: rotate(x) skew(y, y) y jugar un poco con el tamaño y la colocación.

aquí hay una pequeña demostración que creé, basada en su propia demostración:

(Eliminé los bordes porque me parecían innecesarios)

.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;

---

---

Utiliza Nuestro Buscador