[csswg-drafts] [css-transforms] Let 'transform-origin' and 'transform' take comma-separated lists

SebastianZ has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-transforms] Let 'transform-origin' and 'transform' take 
comma-separated lists ==
Previous discussion
============
Back in 2012 there was a [discussion about extending the 
`transform-origin` property to take a list of origins and make 
`transform` 
comma-separated](https://lists.w3.org/Archives/Public/www-style/2012Feb/0201.html).

I'd like to reconsider this, because I think its a common use case to 
have different origins for transformations and I couldn't find a final
 conclusion on this.

The suggestions in that thread were:

1. Let `transform-origin` and `transform` take comma-separated lists 
like e.g. the `background-*` properties.
2. Introduce a `origin()` function affecting all following 
transformations
3. Extend the transform functions by parameters for the origin.

Arguments against the different solutions above were:

- SVG allows both, comma and space separation (SVG 2 refers to CSS 
Transforms, so the syntax is the same)
- backwards incompatible
- cannot be overridden partially
- more verbose for the average case
- confusion-prone
- inconsistent with how other properties work (obviously wrong, as 
other properties use commas for list separation)
- comma-separating all transform functions complicates adding a list 
of transform functions

Proposal
======
Considering the above, my idea is the following:

1. Introduce a `transform-function` longhand property, which takes a 
comma-separated list of multiple space-separated transform functions

 The syntax of `transform-function` would look like this:

 ```
 none | <transform-function-list>#
 ```
 where
 ```
 <transform-function-list> = <transform-function>+
 ```

2. Change `transform-origin` to take a comma-separated list of 
transform origins

 The syntax of `transform-origin` would then look like this:

 ```
 <transform-origin>#
 ```
 where
 ```
 <transform-origin> = [ left | center | right | top | bottom | 
<length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ] <length>?
|
  [[ center | left | right ] && [ center | top | bottom ]] <length>?
 ```
 (or maybe just `<position>`)

 Each <transform-origin> would default to `50% 50%`.

3. Turn `transform` into a shorthand for `transform-function` and 
`transform-origin`

 The syntax of `transform` would then look like this:

 ```
 [ <transform-function-list> <transform-origin> ]#
 ```

This would be backwards compatible, make them consistent with other 
properties like `background-*`, avoid confusion and allow to set 
different origins for the transform functions.

Example
--------
```css
transform: rotate(20deg) skew(10deg, 5deg) 0 0, scale(80%)
```

This would rotate the element by 20 degrees around the upper-left 
corner, then skew it by 10 degrees on the X axis and 5 degrees on the 
Y axis, and finally scale it around the center by 80 percent.

Sebastian

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/589 using your GitHub 
account

Received on Tuesday, 11 October 2016 12:14:04 UTC