After checking the Creative Sanbox website by Google. My mind was blown away. I started to inspect some Divs and trying to find out how it has been done an yep my instinct was right Matrix3D baby.

1matrix3d(m00, m01, m02, m03,
2         m10, m11, m12, m13,
3         m20, m21, m22, m23,
4         m30, m31, m31, m33)
5

So as Sebastian Deutsch said :

Unless you’re a math god you probably think to yourself: “I find the lack of documentation quite disturbing” followed by the question on how to build the really hot Superman stuff on left. The described approach is not meant to be mathematical or complete – I just want to fill a little documentation gap.

Due to the lack of documentation I’ll try to explain a bit for you :

Every transformation could be based onto three basic transformations:

• Rotation
• Scale
• Translation

With some math changing these three transformations you can create magic effect .

1tM = rotationXMatrix
2      .x(rotationYMatrix)
3      .x(rotationZMatrix)
4      .x(scaleMatrix)
5      .x(translationMatrix)
6

Finally you apply it to the image:

1s  = "matrix3d("
2s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + "," + tM.e(1,3).toFixed(10) + "," + tM.e(1,4).toFixed(10) + ","
3s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + "," + tM.e(2,3).toFixed(10) + "," + tM.e(2,4).toFixed(10) + ","
4s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10) + "," + tM.e(3,3).toFixed(10) + "," + tM.e(3,4).toFixed(10) + ","
5s += tM.e(4,1).toFixed(10) + "," + tM.e(4,2).toFixed(10) + "," + tM.e(4,3).toFixed(10) + "," + tM.e(4,4).toFixed(10)
6s += ")"
7 
8document.getElementById('darth-vader').style['-webkit-transform'] = s;
9