Mit CSS3 attr() mit verwandeln drehen

Question

Ich möchte über ein Attribut dh

in CSS in der Lage sein zu drehen,

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

Die CSS ich bisher habe, ist

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

Aber das wirft ein Fehler, was ist die korrekte Syntax?

Answer 1

Das ist in aktuellen Browsern nicht möglich. Aber die Spezifikation sagt:

Die attr() CSS-Funktion verwendet wird, um den Wert eines Attributs des ausgewählten Elements abzurufen und im Stylesheet verwenden. Es kann auch für Pseudo-Elemente verwendet werden, und in diesem Fall wird der Wert des Attributs für das ursprüngliche Element des Pseudo-Elements zurückgegeben.

Die Funktion attr() kann mit jeder CSS-Eigenschaft verwendet werden, aber die Unterstützung für andere Eigenschaften als Inhalt ist experimentell.

So wird es in naher Zukunft unterstützt werden.

Hier ist die MDN doc.

Answer 2

Ich halte aus keine Hoffnung, dass sie jemals vollständig nach dem Standard implementieren werden, dass Asim weist darauf hin, aber die gute Nachricht ist, dass man fast die gleiche Sache mit Custom Properties aka CSS variables

erreichen kann, gibt es eine Javascript API für DOM-Elemente zu erhalten und diese Variablen

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

oder Sie können es auch direkt gesetzt in der HTML gesetzt, wenn Sie die hässliche Syntax nichts ausmacht:

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

Hier ist ein Beispiel (Ihre Laufleistung mit diesem Code-Schnipsel variieren können für benutzerdefinierte Eigenschaften Ihres Browsers Unterstützung abhängig):

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