[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)