Transform Settings – Getting Your Head Around them?

by | Mar 16, 2019

So I recently started exploring the magic of transform when I discovered Divi Supreme Modules, not something I would have done much prior to this. Is life worth living spending hours fiddling with css for fancy effects? Well maybe, occasionally.

As shown  in the Transform & Rotation panel doing so with the Supreme Image module is fairly straight forward and easy to understand. But note the order of the settings: Perspective, then Rotate Y, Rotate X and finally Rotate Z for each of the XYZ axis. More on this later. If you inspect this in Chrome you will see the following: 

transformperspective(961px) rotateY(18deg) rotateX(37deg) rotateZ(-3deg);

In fact if I paste that into the Main Element css of an image module I will get the same result.

Things start to get confusing though when you start using Divi’s new transform feature. Leaving aside the perspective the results are not quite the same. The perspective setting is not currently available in the new transform feature.  For the purposes of singing of the same hymn sheet lets redo the Supreme Image above so that it hasn’t any perspective. 

So now I am not getting the effect I was looking for but lets move on and try to replicate this in Divi. 

I start logically looking at the rotate controls? But which is X, Y, Z ?

Fooled by my previous experience with the Supreme image module I try the values 18deg for Y, 37deg for X and -3deg for Z. 

It doesn’t quite look right and if I go and inspect this I see the following: 

transform: rotateX(37deg) rotateY(-3deg) rotateZ(18deg);

Confusion reigns!

It looks like our settings should be,

Z axis
X axis
Y axis

in that order. So let’s try this again. 

it is still not right. So, more confusion and the need to explore a bit more. 

If you dig around. the css and look at the difference between how the values are ordered you quickly realise that this can effect the outcome of the transform.

Let’s look at an example of this by switching the order of the axis to the more logical  X Y Z. 

Obviously the order has an effect on the result 

To be honest, finding a definitive answer as to what the order should be, is impossible to find on the internet. A prime example of technology showing its ignorance by assuming that the end user should just know certain things.

So digging in again, assuming the X Y Z order, we now need to configure our axis with new values: transform: rotateX(30deg) rotateY(26deg) rotateZ(-17deg);

Hope you are still with me?

w3Schools has a list of all the properties that can be manipulated under transform but mentions nothing about a precedence order as a requirement. I would say that logically it should be XYZ.

Taking into account that there isn’t a setting for perspective in the new Divi transform feature you would assume that adding it yourself would be the answer. Your assumption would be wrong though as it just overrides what Divi does and just applies a perspective value in the transform. This pretty much leaves your image unchanged. 

You therefore need to write out your css override in full, making Divi’s transform settings redundant…

Until Elegant Themes adds the Perspective control to the Transform settings. 

The full list of properties that can be applied to Transform are listed on the w3Schools page.