A great use of 3d transform matrix3d


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.

matrix3d(m00, m01, m02, m03,
         m10, m11, m12, m13,
         m20, m21, m22, m23,
         m30, m31, m31, m33)

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 .

tM = rotationXMatrix

Finally you apply it to the image:

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

Enjoyed the content? Receive the next one in your inbox! No spam, just content.

Khaled Garbaya

Khaled Garbaya is a software developer and active opensourcerer at Contentful. He speaks multiple languages and is often overheard saying "Bonjour" in HTML. You can follow him on Twitter, on Github, and on YouTube. He also runs How To Contentful as a project.

© 2012–2021 Copyright Khaled Garbaya. All rights reserved.

This site is built with Gatsbyjs . The source code is hosted on Github.

Contentful Logo Netlify Logo