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?
3 Answers
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>
5 Comments
user989840
Cool ! I was looking for something like this for a long time:) Thanks!:)
user2836501
It seems wrong to change variables this way, but it does solve a major problem I was facing.
jrz
@user2836501 why do you say it seems wrong to use them this way? this is exactly what they are designed to do
user2836501
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
Valery
Thank you @jonz. The approach is quite flexible. It allowed me to transition a list's sorting smoothly.
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.
Comments
9 and 5 months later I ran into the same problem and google took me here. However after checking the docs provided by @Harry I saw it is possible. I will copy and paste the example from MDN docs (with some code styling) here:
div[data-rotate] {
width: fit-content;
transform-origin: 50% 50%;
rotate: attr(data-rotate deg, 1.5deg);
}<div data-rotate="-3">I am rotated by -3 degrees</div>
<div data-rotate="2">And I by 2 degrees</div>
<div data-rotate>And so am I, using the fallback value of 1.5deg</div>(Edit 5 minutes later): Here is the link MDN docs - attr
attr()function currently works with any property other thancontent.attr()is intended to work with other properties but as I had mentioned in my first comment, it currently works only withcontent.