W3C home > Mailing lists > Public > www-style@w3.org > July 2014

Re: [css-transforms] Making 'transform' match author expectations better with specialized 'rotate'/etc shorthands

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 12 Jul 2014 19:32:51 -0700
Message-ID: <CAAWBYDCef76GTzu+t45wCq2KqJ2Xe=E_W2BVdVvgp4x0pS4r+g@mail.gmail.com>
To: www-style list <www-style@w3.org>
On Fri, Jul 11, 2014 at 11:42 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> Earlier today I saw a Twitter thread started by Lea
> <https://twitter.com/LeaVerou/status/487350702386479105> about how she
> commonly accidentally types the name of the transform she wants as the
> property (like "rotate: 45deg;") and then has to go back and correct
> it afterwards.  Several other devs chimed in that they do this as
> well, and I know that I've done it a few times (especially when using
> SVG - I use "transform='translate(...)'" so often that I commonly try
> to name the attribute "translate" first).
>
> Since this is something that devs trip over so much, it might be worth
> accommodating it in the syntax.  I think we can do this compatibly
> with the current syntax.  Here's a proposal:
[snip]

Sylvain privately asked for some examples of what my proposal would
do.  Here are a couple:

1. Scale an element up slightly on hover.

Old:

el:hover { transform: scale(1.1); }

New:

el:hover { scale: 1.1; }

2. On hover, scale the element up slightly.  On click, translate it slightly.

Old:

el:hover { transform: scale(1.1); }
el:active { transform: translate(3px, 3px); }
el:hover:active { transform: translate(3px, 3px) scale(1); }

New:

el:hover { scale: 1.1; }
el:active { translate: 3px 3px; }

3. Animate an element rocking back and forth with a rotate. On hover,
scale the element up slightly:

Old:

LITERALLY IMPOSSIBLE (without quitting and using JS to do the whole thing)

New:

@keyframes sway { 0%, 50%, 100% { rotate: 0deg; }, 25% { rotate:
10deg; }, 75% { rotate: -10deg; } }
el { animation: sway 3s infinite; }
el:hover { scale: 1.1; }

4. Translate an element 100px, then rotate it 90deg.

Old:

el { transform: translateX(100px) rotate(90deg); }

New:

el { translateX: 100px; rotate(90deg); }

5. Rotate an element 90deg, *then* translate it 100px.

Old:

el { transform: rotate(90deg) translateX(100px); }

New:

Same. (The function properties apply in T/R/Sc/Sk order, so you have
to use the normal transform list syntax to get any other ordering,
using either 'transform' or the 'transform-list' longhand.)

~TJ
Received on Sunday, 13 July 2014 02:33:38 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC