使用CSS3的attr()和transform rotate

Question

我希望能够通过CSS属性进行旋转，例如：

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

我目前的CSS代码是

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

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

- Chris

---

我认为CSS的“attr（）”函数目前只能与“content”属性一起使用。 - Harry

https://dev59.com/0mkw5IYBdhLWcg3w_PXn - Pekka

@Pekka웃 谢谢，但那篇文章已经四年了。 - Chris

看起来自那时以来并没有太多变化。有一个来自2014年的答案似乎是最先进的状态。如果事实证明情况发生了巨大变化，我很乐意在那个问题上设置赏金以更新它。 - Pekka

@Chris：请参考MDN页面底部的表格-https://developer.mozilla.org/en/docs/Web/CSS/attr。`attr()`旨在与其他属性一起使用，但正如我在第一条评论中提到的那样，它目前仅适用于`content`。 - Harry

Answer 1

我没抱太大希望他们会按照Asim指出的标准完全实现，但好消息是，你可以通过自定义属性(Custom Properties)或者称作CSS变量(CSS variables)来实现几乎相同的功能。

对于DOM元素有一个Javascript API，可以获取和设置这些变量。

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

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

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

以下是一个示例（此代码段在各个浏览器中根据自定义属性的支持情况而有所不同）：

: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>

- Jon z

---

很酷！我已经很久想找这样的东西:) 谢谢! :) - user989840

这样改变变量似乎是不正确的，但它确实解决了我面临的一个重要问题。 - user2836501

@user2836501 为什么你说这样使用它们似乎不正确？这正是它们设计的目的。 - Jon z

回顾一下，这种技术非常方便，我相信在处理:before/:after伪元素时会提供一些极好的价值。 - user2836501

谢谢@jonz。这种方法非常灵活，让我能够顺利地转换列表的排序。 - Valery

Answer 2

在当前的浏览器中，这是不可能的。但规范说明如下:

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

attr() 函数可与任何 CSS 属性一起使用，但对除 content 以外的属性的支持是实验性的。

因此，它将在不久的将来得到支持。

这里是 MDN 文档。

- Asim K T