Re: [csswg-drafts] [css-transforms] Keywords for `transform` (#944) from Christoph Päper via GitHub on 2019-04-28 (public-css-archive@w3.org from April 2019)

From: Christoph Päper via GitHub <sysbot+gh@w3.org>
Date: Sun, 28 Apr 2019 09:02:50 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-487359986-1556442169-sysbot+gh@w3.org>

Recently, I came across another use case that would benefit from predefined keywords: projections of 3D objects into 2D space or, in other words, displaying 2D boxes as if they were in 3D space. There are several standardized and common ways to do this, which come with specific skewing angles and scaling factors:

- Orthographic representations (ISO 5456-2)
- Axonometric representations
  + Isometric projections
    * _Military_ (or _Axonometric_ in architecture) or 1&ratio;1 projection: no scaling, skewing by 45°
    * _Isometric_ or 30° projection (ISO 5456-3 5.1m technical drawings and architecture): skewing by 30°, scaling by &radic;&frac23;
    * _Isometric_ or 1&ratio;2 or 27° projection (computer games): skewing by arctan(0.5)
  + Dimetric projections
    * _Engineering_ or 42°/7° projection (ISO 5456-3 5.2):  one axis scaled by 0.5, angles of ca. 7°10′ (`0.02turn`) and 41°25′ (`0.115turn`)
  + Trimetric projections
    * _Cavalier_ projection: no scaling, one axis unskewed, the other by 45°
    * _Cabinet_ projection: same as Cavalier but depth axis scaled by 0.5
    * Planometric projections
- Central projections (ISO 5456-4)

I imagine being able to specify something like `transform: isometric right` to treat a 2D box as the right side XY view of a 3D object by skewing, scaling and perhaps translating it into what would be the right-hand YZ plane (CSS axes, ISO: Z&prime;X&prime;).

| | |
| -- | -- |
| Name: | `transform` |
| Value: | &lt;projection> &lt;view>? \| &lt;transform-list> |

- *`<projection>`* = [ **`none`** | `isometric` | `cavalier` | `cabinet` | `engineer` | `military` | `game` | &hellip; ] &lt;direction>?
- *`<view>`* = **`front`** | `back` | `top` | `right` | `bottom` | `left`
- *`<direction>`* = **`top-right`** | `bottom-right` | `bottom-left` | `top-left`

I am still trying to get my head around these terms and the math behind them, so not everything above may make immediate sense.

-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/944#issuecomment-487359986 using your GitHub account

Received on Sunday, 28 April 2019 09:02:54 UTC