Transforms: Replace assigned article on CSS Perspective

[MaoShizhong]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

The currently assigned CSS Tricks article on perspective includes several inaccuracies, such as the order of composite transforms, which the article demonstrates via animations that show the wrong process but still end up in the correct final positions. This is even pointed out in the comments, but CSS Tricks rarely gets updated nowadays and comments are closed.

This has caused quite some confusion, including a long Discord conversation on the contradicting info for transform order in that article.

The main inaccuracies in the article aren't directly related to CSS perspective itself, so ideally, we replace the article with another resource that goes through CSS perspective but does not contain the those inaccuracies.

Acceptance criteria

• The CSS Perspective article in the assignment is replaced with https://3dtransforms.desandro.com/perspective
• That link's text label is changed from [the `perspective` property on CSS tricks] to [perspective in CSS].

Please comment below if you'd like to be assigned to this issue. Please do not open a PR unless you have been assigned by a maintainer.

Path

Ruby / Rails, Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-transforms#assignment

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[columk1]

The MDN docs also cause confusion (despite being correct) because for many people it's more intuitive to read transforms left to right. It would be nice if the CSS tricks article or its replacement showed both ways.

I usually share this article when someone is confused about it: https://codepen.io/bali_balo/post/chaining-transforms

[MaoShizhong]

@columk1 That article is actually also misleading because it says you can read composite transforms from left to right, and demonstrates doing so via incorrect mechanisms (in this case, the translate axes rotating with the element, which it doesn't so). We removed that codepen article from the transforms lesson because of this.

That being said, the article I'm looking for for this issue should discuss CSS Perspective. Whether or not it talks about chained transforms, the information in it should be accurate.The issue with the current article is it mentions chains transforms as a side thing and is wholly inaccurate about it. CSS Perspective is still the focal point.

[columk1]

I don't think it's misleading. You can read them left to right or right to left depending how you want to visualize the transform. It doesn't change anything. Yes, right to left is how it happens internally, but lots of people will still read them left to right, especially anyone who has used 3D software. I think it's more misleading to say that they can only be read one way because it confuses that group of people as we have seen on Discord.

https://3dtransforms.desandro.com/

This one is old but pretty good. I couldn't find anything better than the CSS Tricks article.

[MaoShizhong]

Reading left-to-right requires you to move the transform origin and axes when you translate or rotate respectively, i.e. assuming the entire behaviour to be completely different. Historically, we've had a lot of confusion around this topic solely because of the order issue and its reliance on changing the behaviour of the transform origin and axes, which many have not found intuitive, especially when documentation says things are applied right-to-left.

Since writing a composite transform in a different order often leads to a completely different output, many have been confused when some resources have said you can read them in either order (which only works if you also change the origin/axes behaviour as well, not just the reading order) or imply things are applied left-to-right when documentation says right-to-left.

That aside, this issue isn't so much about the transform order as a topic but more its distraction from the perspective assignment. I like the resource you provided, including the interactive bit in the perspective section! Specifically https://3dtransforms.desandro.com/perspective

Let me know if you'd like to be assigned to replace this link.

[columk1]

Yes, I've seen four long discussions about it on Discord so far, with lots of confusion and arguing. That Codepen article is a useful link in these cases - it clears things up for either camp because it shows that both visualization methods are valid.

I can replace the link if you want. Otherwise it's a nice first contribution opportunity for newer students.

[MaoShizhong]

Updated acceptance criteria

• The CSS Perspective article in the assignment is replaced with https://3dtransforms.desandro.com/perspective
• That link's text label is changed from [the `perspective` property on CSS tricks] to [perspective in CSS].

Please comment below if you'd like to be assigned to this issue. Please do not open a PR unless you have been assigned by a maintainer.

[c8in4]

Hey @MaoShizhong ,
I'd like to give it a shot as my first ever contribution if that's alright.

[MaoShizhong]

All yours @c8in4