- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Sat, 12 Jul 2014 19:32:51 -0700
- 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