New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-transforms-2] Keywords for transform
#944
Comments
The geometry APIs already have https://drafts.fxtf.org/geometry/#dom-dommatrixreadonly-flipx
That would not be consistent with the existing APIs. |
Since CSS usually prefers 🥙 over 🐪 case, I think keywords like |
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 (measured from the horizon) and scaling factors: Orthographic representations (ISO 5456-2)
Axonometric representations (ISO 5456-3)
Isometric projectionThese have the same scaling factor on all axes.
Dimetric projectionsOne axis is scaled differently.
Oblique projections (ISO 5456-3 5.3)One skewing angle from the horizon is 45°.
Central projections (ISO 5456-4)
I imagine being able to specify something like
I am still trying to wind my head around these terms and the math behind them, so not everything above may make immediate sense. However, I found it way too complicated to achieve such a projection in SVG. |
transform
transform
In particular, setting something as "facing" one of the six cardinal directions isn't enough to reproduce your examples, where there are diagonal surfaces, etc. If I'm reading your examples correctly, tho, all the transformations are achievable as a rotate/scale/skew transform on the container, and then rendering isometrically? |
Oh, I failed to see and thus consider You are right that the transforms would not be enough to make a proper 3D object (other than cuboids) out of 2D tiles. The blue house graphics from Wikipedia are intended to visualize the differences of the various methods, not to suggest this was actually possible to achieve. I was only (or should have only be) thinking about 2D transformations of 2D boxes into a 3D space projected onto the 2D surface. My actual use case was an transformed CSS Grid that should align with isometric bitmaps. I think that would be in scope of Like I said, I have not yet thought this through completely. It could well belong elsewhere. Possibly, projections belong in two places:
|
The
transform
property currently acceptsnone
or a list of transform functions. I believe it would make sense to add some keywords for common use cases. This could make code more readable especially for beginners and math-illiterates.flip-vertical
,flip
?scale(1, -1)
flip-horizontal
,mirror
?scale(-1, 1)
mirror
rotate
,flip
?,straight
,turn-down
,down
rotate(0.5turn)
=flip-vertical flip-horizontal
(rotate(straight)
?)rotate-clockwise
,turn-right
,right
rotate(0.25turn)
(rotate(right)
?)rotate-anticlockwise
,turn-left
,left
rotate(0.75turn)
orrotate(-0.25turn)
(rotate(left)
?)flip-diagonal-right
,flip-right
turn-right flip-vertical
=turn-left flip-horizontal
flip-diagonal-left
,flip-left
turn-right flip-horizontal
=turn-left flip-vertical
spin
,full
,turn-up
,up
rotate(1turn)
(only makes sense with animation)north-north-east
rotate(22.5deg)
clock-1
rotate(30deg)
north-east
rotate(45deg)
clock-2
rotate(60deg)
east-north-east
rotate(67.5deg)
clock-3
,east
rotate(90deg)
east-south-east
rotate(112.5deg)
clock-4
rotate(120deg)
south-east
rotate(135deg)
clock-5
rotate(150deg)
south-south-east
rotate(157.5deg)
clock-6
,south
rotate(180deg)
south-south-west
rotate(202.5deg)
clock-7
rotate(210deg)
south-west
rotate(225deg)
clock-8
rotate(240deg)
west-south-west
rotate(247.5deg)
clock-9
,west
rotate(270deg)
west-north-west
rotate(292.5deg)
clock-10
rotate(300deg)
north-west
rotate(315deg)
clock-11
rotate(330deg)
north-north-west
rotate(337.5deg)
clock-12
,north
rotate(360deg)
In SVG, where
transform-origin
defaults to (0 0) instead of (50% 50%), flipping also requires a translation by the respective size (i.e. width or height) of the box.The systematic rotations (which were added in early May 2019 to this issue) are obviously based upon twelfth-turns (clock) and sixteenth-, eighth- or quarter-turns (compass directions). Those could be implemented as global
<angle>
keywords in css-values instead, e.g.rotate(north-north-west)
or perhaps ratherrotate(NNW)
. This could also include special named angles like the Golden Angle of ca. 137.5° = π·(3−√5) and the Magic Angle of ca. 54.7° = arctan √2.The text was updated successfully, but these errors were encountered: