11

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?

Chris
  • 26,744
  • 48
  • 193
  • 345
  • I don't think the CSS `attr()` function currently works with any property other than `content`. – Harry May 24 '16 at 08:15
  • http://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute – Pekka May 24 '16 at 08:16
  • @Pekka웃 Thank you but that post is 4 years old – Chris May 24 '16 at 08:17
  • It doesn't look like much has changed since then, though. There is an answer from 2014 that seems to be the state of the art. If it turns out things have changed massively I'd be happy to place a bounty on that question to update it – Pekka May 24 '16 at 08:21
  • @Chris: Please refer to the table at the bottom of this MDN page - https://developer.mozilla.org/en/docs/Web/CSS/attr. The `attr()` is intended to work with other properties but as I had mentioned in my first comment, it currently works only with `content`. – Harry May 24 '16 at 08:22

2 Answers2

16

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>
jrz
  • 4,286
  • 1
  • 29
  • 21
  • Cool ! I was looking for something like this for a long time:) Thanks!:) – user989840 Mar 27 '19 at 18:41
  • It seems wrong to change variables this way, but it does solve a major problem I was facing. – user2836501 Jul 06 '21 at 23:36
  • @user2836501 why do you say it seems wrong to use them this way? this is exactly what they are designed to do – jrz Jul 07 '21 at 13:18
  • in retrospect, this technique can come in quite handy and I believe does offer some excellent value especially when dealing with :before/:after pseudo elements – user2836501 Jul 29 '21 at 18:38
  • Thank you @jonz. The approach is quite flexible. It allowed me to transition a list's sorting smoothly. – Valery May 26 '23 at 09:25
5

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.

Asim K T
  • 16,864
  • 10
  • 77
  • 99