使用带有变换旋转的 CSS3 attr()

Question

我希望能够通过属性在 CSS 中旋转，即

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

到目前为止我拥有的 CSS 是

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

但这会引发错误，正确的语法是什么？

Answer 1

我不抱任何希望他们会根据 Asim 指出的标准完全实现，但好消息是您可以使用自定义属性（即 CSS 变量）实现几乎相同的功能

有一个用于 DOM 元素的 Javascript API 来获取和设置这些变量

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

或者，如果您不介意内联style属性，您甚至可以直接在 HTML 中设置它：

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

这是一个示例（您使用此代码段的效果可能因浏览器对自定义属性的支持而异）：

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

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

Answer 2

这在当前的浏览器中是不可能的。但规范说：

attr() CSS 函数用于检索所选元素的属性值并在样式表中使用它。它也可以用在伪元素上，在这种情况下，返回伪元素的原始元素上的属性值。

attr() 函数可与任何 CSS 属性一起使用，但对内容以外的属性的支持尚处于实验阶段。

所以在不久的将来将会得到支持。

这是MDN文档。