Question

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

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

我到目前为止的CSS是

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

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

Answer 1

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

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

attr（）函数可以与任何CSS属性一起使用，但支持   内容以外的属性是实验性的。

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

这是MDN doc。

Answer 2

根据Asim所指出的标准，我并没有表示希望他们能够完全实现，但好消息是你可以用Custom Properties aka CSS variables

实现几乎相同的目标。

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

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

或者你甚至可以直接在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>

使用CSS3 attr（）和变换旋转

2 个答案: