W3C home > Mailing lists > Public > www-style@w3.org > August 2016

[css-values] CSS counters inside CALC function

From: Hr Gwea <hrg.wea@gmail.com>
Date: Fri, 26 Aug 2016 08:29:59 -0300
Message-ID: <CAE++px8ARvWkiQX5sNE2_pQi7OO+iAXUigLy79S=QEer7K72Og@mail.gmail.com>
To: www-style list <www-style@w3.org>
Have you, guys, thought of the possibility of using CSS counters inside the
CALC function?
That would be super useful for so many cases.

Example:

<div>
> <e></e>

<e></e>

<e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>
> <e></e>

</div>



e:nth-child(1) {transform: rotate(30deg) translateY(50px)}

e:nth-child(2) {transform: rotate(60deg) translateY(50px)}

e:nth-child(3) {transform: rotate(90deg) translateY(50px)}

e:nth-child(4) {transform: rotate(120deg) translateY(50px)}

e:nth-child(5) {transform: rotate(150deg) translateY(50px)}

e:nth-child(6) {transform: rotate(180deg) translateY(50px)}

e:nth-child(7) {transform: rotate(210deg) translateY(50px)}

e:nth-child(8) {transform: rotate(240deg) translateY(50px)}

e:nth-child(9) {transform: rotate(270deg) translateY(50px)}

e:nth-child(10) {transform: rotate(300deg) translateY(50px)}

e:nth-child(11) {transform: rotate(330deg) translateY(50px)}

e:nth-child(12) {transform: rotate(360deg) translateY(50px)}
Received on Friday, 26 August 2016 11:30:33 UTC

This archive was generated by hypermail 2.3.1 : Friday, 26 August 2016 11:30:33 UTC