Using CSS3 attr() with transform rotate

Question

I want to be able to rotate, in CSS via an attribute i.e.

<my-object data-angle="225"></my-object>

The CSS I have so far is

transform:rotate(attr(data-angle)deg);

But this throws an error, what is the correct syntax?

Answer 1

I'm not holding out any hope that they'll ever fully implement according to the standard that Asim points out, but the good news is that you can achieve nearly the same thing with Custom Properties aka CSS variables

There's a Javascript API for DOM elements to get and set these variables

el.style.setProperty('--foo', 'my custom property value')

or you can even set it directly in the HTML if you don't mind the inline style attribute:

<div style='--foo:"my custom prop val";'>

Here's an example (your mileage with this snippet may vary depending on your browser's support for custom properties):

:root {
  --rotation: 5deg;
}

.rotate {
  padding: 0.2em;
  transition: transform .2s;
  will-change: transform;
}

.rotate:hover {
  transform: rotate(var(--rotation));
}

.more {
  --rotation: 15deg;
}

<button class='rotate'>rotation</button>
<button class='rotate more'>more rotation</button>
<button class='rotate' style='--rotation: 30deg;'>yet more rotation</button>

Answer 2

That's not possible in current browsers out there. But the spec says:

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the pseudo-element's originated element is returned.

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

So it will be supported in near future.

Here's the MDN doc.