CSS to Webflow Designer

Hey everyone,

I am having trouble translating the following CSS to Webflow designer. Do you know what values I should use in which part of the Webflow designer? I am especially having trouble with translating the z-axis of the transform origin into Webflow. Also, I am confused about how the rotate3d values should be used in Webflow.

h1 {
display: inline-block;
-webkit-transform-origin: center center .4em;
transform-origin: center center .4em;
-webkit-transform: rotate3d(1, -.3, 0, 90deg);
transform: rotate3d(1, -.3, 0, 90deg);

Thanks!

Hi @devdo

You’ll find the settings under “Effects”:

image
image

Hello @Matthias. Thanks for your answer, yet I know that these are under the effects. The problem is translating the specific CSS values I gave above to the corresponding part in the Designer or Effects. What I mean is, for example, what to put in and where for this one -webkit-transform-origin: center center .4em;. I know center center is easy to put in at the transform origin settings but what about the z-axis part?

Same thing applies to the -webkit-transform: rotate3d(1, -.3, 0, 90deg);. What should I put in inside the Webflow designer to have the same values?

“-webkit” is a CSS term specific for webkit-based browsers like Chrome or Safari. I guess you can ignore this in Webflow.

Hey man,

Yet the problem is, I want to have these exact same values inside my Webflow designer. Isn’t there a way to translate these CSS values to the language of Webflow designer?

Webflow is using rotateX, rotateY, rotateZ. Your code is using rotate3d.