[HN Gopher] 3D in CSS ___________________________________________________________________ 3D in CSS Author : bradwoodsio Score : 68 points Date : 2023-01-09 20:16 UTC (2 hours ago) (HTM) web link (garden.bradwoods.io) (TXT) w3m dump (garden.bradwoods.io) | jeromesalimao wrote: | This is so cool. | TazeTSchnitzel wrote: | Late last year I wrote a tool that can take a 3D model in .obj | format and turn it into HTML and CSS that'll display the model | rotating about its y axis. It's ludicrously inefficient and | impractical, but it was very fun to do: | https://github.com/hikari-no-yume/obj-to-html | natelokers wrote: | I did a project a while back that takes advantage of this, as a | way to show the folding an unfolding of brochures, I found it to | work much better for this particular use case than WebGL | | here is the output http://gofoldit.com/abcdfegh | | and this is the tool where you create them | | http://gofoldit.com/demo | gketuma wrote: | This website brings me Joy. So elegant. | jjk166 wrote: | Yeah, I wouldn't want every website to look like this but it's | a very refreshing design that works super well. | pfoof wrote: | This lorem ipsum works so-so on Safari. The text can be selected | and it only rotates after selecting and deselecting it | matsemann wrote: | Can't manage to drag the small corner on Firefox for Android. | Might be a bug, or just because it's too small to hit. | | Edit: looking at the code above it, it uses onmousedown which | doesn't work for touch I guess. | [deleted] | bradwoodsio wrote: | It's using the native resize property which is supported on | Firefox Android but that doesn't help much if the tap target | is too small. | | onmousedown is used to change the transform property. It | should still resize even if onmousedown isn't working. | chungy wrote: | Works poorly on Firefox, too. | bradwoodsio wrote: | I'm always having problems with Safari, there is a background- | blend-mode on the site that doesn't work on it either, so the | site doesn't look like it should. | derkoe wrote: | https://impress.js.org/ uses this extensively to create | impressive presentations. | sfpotter wrote: | It doesn't matter if your slides are plain or not. No one ever | thought a talk was good because of how nice the slides' design | was. What matters is having something actually worth giving a | presentation about and presenting it effectively, which is all | about your delivery and _what_ you put on your slides (good: | pictures, diagrams, etc... bad: walls o' text). | nier wrote: | Walls of text too often come with the monotone recital of | that very text. But if you're lucky, the speaker mixes up the | order of bullet points or even forgets one which helps you | keep your mind engaged and stay awake. | awb wrote: | The experience on mobile is really jumpy if you try to swipe or | pinch zoom. | grepfru_it wrote: | Goodbye back button | bradwoodsio wrote: | That's impressive | dylan604 wrote: | Just like overused Powerpoint transitions, I can see this | getting old quickly. | alanbernstein wrote: | I've never seen this before, so not sure how it's normally | used. But I like it a lot. Instead of randomly using | transforms to add "flair" to your presentation, it looks | useful for presenting multiple scales of diagrams in an | intuitive way. It's like powerpoint + https://c4model.com/. | dylan604 wrote: | it looks like the opening credit sequence to some movie | i've seen. maybe a tv show, but the point is that i saw | it, it's recognizable, but did not make me remember the | name of the show. so will using something like this make | people remember your presentation content or just the | fact you used some gimmicky effect | FractalHQ wrote: | Those animations are extremely janky on iOS (unsurprisingly) | dylan604 wrote: | "Where to Next?" | | Don't worry, things hardly ever fuck up around here. That's the | same guy, right? | geuis wrote: | I forget the name of the effect, but it's the one where the | background may have images that move at different rates as the | page scroll increases. | | Over the years I've seen many, many terrible implementations of | that effect with JavaScript. | | The correct and highly performant way to do that is using | perspective. It's an effect that can be done entirely in css. | bradwoodsio wrote: | I think you mean parallax scroll? | geuis wrote: | That's it! Thanks. | SCUSKU wrote: | Parallax? | geuis wrote: | Yah, thanks. Brain fart. ___________________________________________________________________ (page generated 2023-01-09 23:00 UTC)