News for hackers. Stuff that matters.
Re:The World of CSS Transforms by orangegreen on Monday August 09, 2021 @11:30AM (#28118139)
What did people do before CSS transforms?

I've been making an app with React Native and react-native-svg and even though react-native-svg supports transformations, I've had to do a lot of transforms with trigonometry (i.e. rotating a shape around a center point, then getting the new bounding box, which requires things such as Math.atan2).

It's made me really appreciate 1. how much easier front end web development is and 2. how far we've gotten. I cannot tell you how much I appreciate web methods like getBoundingClientRect() or element.closest(), and how easy it is to make animations with CSS and move things around with transforms.

Re:The World of CSS Transforms by crazygringo on Monday August 09, 2021 @01:27PM (#28119645)
I mean, CSS transforms aren't really that useful for regular static layout webpages, so people didn't mostly need them.

Probably the main thing they're most useful for is animation, and people just used jQuery/JavaScript for that instead, which could do most of what you'd want, if a little clunky.

Re:The World of CSS Transforms by dmitriid on Monday August 09, 2021 @12:00PM (#28118518)
> What did people do before CSS transforms?

What sibling comments said, and also jQuery helper functions such as $.fade [1] or GSAP [2]

[1] https://api.jquery.com/fadeIn/#fadeIn-duration-complete

[2] https://greensock.com/gsap/

Re:The World of CSS Transforms by mankyd on Monday August 09, 2021 @06:50PM (#28123277)
I am reminded of my one-time favorite, https://script.aculo.us/.

> current version: script.aculo.us 1.9.0 as of December 23, 2010.

Re:The World of CSS Transforms by dmitriid on Tuesday August 10, 2021 @05:09AM (#28126636)
Yes! The one that started it all.
Re:The World of CSS Transforms by armandososa on Monday August 09, 2021 @11:32AM (#28118178)
We mostly used boxy layouts, sliced up images and flash hacks.
Re:The World of CSS Transforms by armandososa on Monday August 09, 2021 @01:02PM (#28119344)
If you're genuinely curious, The CSS Zen Garden[1] is a great testimony of what people was able to accomplish with the the limitations of CSS2 while keeping support for IE6. That meant: A limited number of fonts, 1 channel transparency, no flexbox or grid for layouts, just floats and positioning. Fun times.

[1]http://www.csszengarden.com/

Re:The World of CSS Transforms by legrande on Monday August 09, 2021 @11:55AM (#28118453)
> What did people do before CSS transforms?

They used Flash. You can now do everything you could do in Flash, with CSS[0]. There's even a few GUI tools[1] for CSS where you don't have to figure out the code:

[1] https://enjoycss.com/

[1] http://selfcss.org/

[0] Edit: And Javascript

Re:The World of CSS Transforms by rchaud on Monday August 09, 2021 @12:46PM (#28119136)
> You can now do everything you could do in Flash, with CSS.

AND JavaScript.

With Flash, you just needed to know Flash. With HTML5, you need to know a whole lot more about DOM manipulation. If you're animating SVGs, that has its own markup and learning curve.

Flash could also do 3D animation, which CSS cannot. You need to know WebGL and a library like three.js for that to be workable.

By far the best WYSIWIG animation tool I've used is Tumult Hype for Mac. It handles the creation of all the JS-based animation triggers through the GUI. I hope there will be a WebGL version of this that is as easy to use.

Re:The World of CSS Transforms by legrande on Monday August 09, 2021 @12:57PM (#28119288)
> Flash could also do 3D animation, which CSS cannot

Saw a few Codepens over the years[0] where people managed to rotate 3D cubes, all done entirely with CSS. Of course if you needed to interact with the cube you would need JS, but 3D can be achieved with CSS alone, it's just a very hacky way of doing it.

[0] https://codepen.io/mehra_as/pen/KRKPBq

Re:The World of CSS Transforms by Jaygles on Monday August 09, 2021 @02:39PM (#28120563)
This is a CSS only 3d thing I did a while ago as an exercise. Its a bit buggy but still pretty neat https://jaygles.github.io/city-block/
Re:The World of CSS Transforms by 6510 on Monday August 09, 2021 @01:47PM (#28119919)
You can do interactions with hover, [hidden] check boxes, focus and even anchors.
Re:The World of CSS Transforms by MonaroVXR on Monday August 09, 2021 @09:52PM (#28124427)
Someone made the new iMac with CSS
Re:The World of CSS Transforms by mumphster on Monday August 09, 2021 @01:16PM (#28119511)
Re:The World of CSS Transforms by rchaud on Monday August 09, 2021 @04:59PM (#28122264)
That article is about rotating 2-D shapes on the z-axis (3-D plane).

An image of a cube in an HTML document will look like 3D without any transforms applied. However if you try to rotate that image on the Z-axis, it will warp, clearly showing that it is still a 2D object. There are other necessary aspects of 3D such as camera angles and dynamic light and shadows, but that's outside the scope of what you'd expect to be supported in the official CSS spec.

HTML and CSS don't support 3D shape manipulation and motion. WebGL is needed for that.

Re:The World of CSS Transforms by grishka on Monday August 09, 2021 @07:08PM (#28123437)
However, Flash was really easy to get into. You didn't need any programming whatsoever if all you wanted was a vector cartoon. And you did need to copy-paste some ActionScript if you wanted a fancy-looking navigation bar. Current web lacks this ease of authoring, so I wouldn't say "you can now do everything you could do in Flash".

Flash also felt more like a proper application framework. Web still feels like you're working with an extremely advanced word processor.

Re:The World of CSS Transforms by edoceo on Monday August 09, 2021 @12:01PM (#28118534)
Both of those block usage on mobile device. Is this irony?
Re:The World of CSS Transforms by legrande on Monday August 09, 2021 @01:00PM (#28119323)
Try spoofing the useragent, or if your browser supports requesting a 'desktop version', then use that. I wouldn't use a phone to code though
Re:The World of CSS Transforms by bryanrasmussen on Monday August 09, 2021 @04:24PM (#28121909)
>[0] Edit: And Javascript

And SVG! ..and an almost fanatical devotion to the Pope.