CSS Can I use transform: inline on an element?

Question

I am trying to apply a transform to an element using inline CSS. This is because I'm making a Block in Wordpress and I want the values of the transform to be configurable by the user on a per-Block basis, so they have to be applied using inline CSS.

I can't seem to get the inline CSS to apply the transform: property to the element.

Does CSS not allow this?

Answer 1

As I know every css style can work inline.

But there are rules what make some style to dont work, you can read documentation about transform to try to figure out why this is heppening, you are maybe trying to transform element what cant be tranformed or your syntax for inline css is invalid.

If documentation dont help you please post here your code.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Here is some code, where I used inline transform and it works.
https://code.sololearn.com/WHQg8T8S8UCU/?ref=app

Answer 2

Did you tried to use external style and set fixed value to any element, if this dont work problem is with supporting transform style.
Maybe you need some special plugin for wordpress to use this.

Not sure are thing you are using to add dynamic style exualy jsx.
If so check this, syntax is diferent:
https://www.w3schools.com/react/react_css.asp

Code will look something like this:
<div style={
color: {dynamicColor},
backgroundColor: {dynamicBackground}
} > {data} </div>

but probably is not jsx but something similar

Answer 3

@PanicS

no it is just an add-on for Wordpress that lets you design custom "Blocks" for use in Wordpress.

A Block is just a group of HTML elements you can easily re-use again and again in your Wordpress pages.

You style the Blocks using CSS, and the addon lets you create "Fields" in a Block which are just like variables that you can configure when you are editing your Wordpress page and control some of how the Block looks each time you use one in a page.

So I think it is a problem Genesis Custom Blocks addons has with inline styling with transform attribute, as I tried all of the inline CSS in codepen and it works fine.

It seems like you have to subscribe to their Pro version to get support, so I guess I might be looking for an open source alternative to Genesis Custom Blocks.

Answer 4

@PanicS

Here is the code from the Genesis Custom Blocks configuration:

<div class="remember-block-title rubber"
style="color:{{titlecolor}};
font-size:{{titlefontsize}};
transform: translate(3em,3em) rotate(-5deg);
">{{rememberblocktitle}}</div>

items in {{brackets}} are dynamically filled on page generation. I have tried without using multiple transform functions as well, and have now put static values in to try to see if inline transform is working but the transform attribute doesn't show up in element inspector after page generation.

the external styling is this:

.remember-block-title {

}

.rubber {
z-index: 1;
color: green;
font-size: 1em;
box-shadow: 0 0 0 3px, 0 0 0 2px inset;
border: 2px solid transparent;
border-radius: 0.25em;
display: inline-block;
padding: 0.5em 0.3em;
line-height: 22px;
/*font-size: 24px;*/
font-family: 'Black Ops One', cursive;
text-align: center;
width: auto;
}

Answer 5

The dynamic values are coming to through into the page generation too, I added some HTML to check them and the values are ok. It's like the inline CSS for transform is being removed for some reason.