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

On 16/07/2014 2:12 PM, Shane Stephens wrote:
> On Wed, Jul 16, 2014 at 1:58 PM, Dean Jackson <dino@apple.com> wrote:

>> On 16 Jul 2014, at 13:24, Shane Stephens <shans@google.com> wrote:

>> Wait, you're not talking about the proposal then. You're making a new
>> proposal where the author can only set one of the values. If they can set
>> more than one, e.g. rotate AND translate, then there has to be order
>> dependency, right? And an author needs to understand what that dependency
>> means.
>>
>
> OK, I think this is the crux of the misunderstanding. In the general case,
> components of a transform list have an effect that is dependent upon the
> components that have preceded them. So for example, a translate(100px) will
> actually translate by (70px, 70px) if preceded by a rotate(45deg).

This is not true. A box is translated by (100px, 100px) if preceded by a 
rotate(45deg). It is easier to understand with nested elements.

<style type="text/css">
#outer {
   background: rgba(255,0,0,0.5);
   margin: 100px;
   float: left;
   width: 100px;
   height: 100px;

}
#outer div {
   background: rgba(0,0,255,0.5);
   width: 100px;
   height: 100px;
}

#inner1a {
   transform: translate(100px, 100px) rotate(45deg);
}

div#inner1b {
   transform: translate(100px, 100px);
   background: rgba(255,255,0,0.5);
}

#inner1b div {
   transform: rotate(45deg);
   background: rgba(0,0,255,0.5);
}

#inner2a {
   transform: rotate(45deg) translate(100px, 100px);
}

div#inner2b {
   transform: rotate(45deg);
   background: rgba(255,255,0,0.5);
}

#inner2b div {
   transform: translate(100px, 100px);
   background: rgba(0,0,255,0.5);
}

</style>

<div id="outer">
   <div id="inner1a"></div>
</div>

<div id="outer">
   <div id="inner1b"><div></div></div>
</div>

<div id="outer">
   <div id="inner2a"></div>
</div>

<div id="outer">
   <div id="inner2b"><div></div></div>
</div>

> However, there's an ordering for which this dependency doesn't occur.
> Taking just rotate and translate, for example, performing the rotation
> after any translation has the same local effect as performing the rotation
> alone. The proposal uses this order.

I do not follow what you mean here. What is local effect?

> So when we talk about 'order dependency', this is what we mean - that a
> translation in X can turn into a translation in X and Y if preceded by a
> rotation, or that a simple scale and rotate can turn into a skew if applied
> in the wrong order.

This is not true on several counts. A translation in X does not turn 
into a translation in X and Y if preceded by a rotation and skew is 
completely different.


Alan

Received on Wednesday, 16 July 2014 06:22:19 UTC