TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Spinning Diagrams with CSS

954 点作者 hrldcpr大约 2 年前

18 条评论

hrldcpr大约 2 年前
Some commenters on HN and Twitter were curious how I made the spinning diagrams in a previous thing I wrote, so 8 months later I finally wrote down an explanation.<p>(Previous HN thread here - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=32528769" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=32528769</a> )
评论 #35648609 未加载
评论 #35649507 未加载
评论 #35647980 未加载
评论 #35647179 未加载
评论 #35648023 未加载
efortis大约 2 年前
Here&#x27;s a fluid-width cube carousel you can stop at its faces:<p><a href="https:&#x2F;&#x2F;ericfortis.github.io&#x2F;web-animations&#x2F;#-fluid-3d-cube-carousel" rel="nofollow">https:&#x2F;&#x2F;ericfortis.github.io&#x2F;web-animations&#x2F;#-fluid-3d-cube-...</a><p>Source:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;ericfortis&#x2F;web-animations&#x2F;blob&#x2F;main&#x2F;3d-carousel.js">https:&#x2F;&#x2F;github.com&#x2F;ericfortis&#x2F;web-animations&#x2F;blob&#x2F;main&#x2F;3d-ca...</a>
评论 #35649865 未加载
评论 #35647663 未加载
评论 #35656909 未加载
unwind大约 2 年前
This is awesome in (for me) at least two dimensions at the same time: it&#x27;s a very interesting way of visualizing the actual math concept going on, by making the equation 3D to match what it&#x27;s modelling. At the same time, it&#x27;s very impressive technically that this can be done at all, and done without active per-frame custom code.<p>That this amount of &quot;whoa that&#x27;s not a 2D document&quot; can be done by the web&#x27;s standard stylizing technology is amazing. I&#x27;m not (again, personally) 100% convinced it <i>should</i> be this amazing[*], but that&#x27;s another discussion.<p>Well done.<p>[*]: I&#x27;m just afraid of the complexity level in modern browsers, that&#x27;s the other side of the &quot;wow it can do that?&quot; coin.
asimpletune大约 2 年前
You can do so much with pure css. Using checkboxes elements to toggle menus comes to mind as one of the lowest hanging fruits. Also detail elements are great.
评论 #35650277 未加载
packetslave大约 2 年前
The pyramid animation at the top reminds me of 11:30 in this video: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;q6MJSfjXUgQ?t=690" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;q6MJSfjXUgQ?t=690</a><p>...which is the same 2D&#x2F;3D illusion, but made with, you know... humans.
评论 #35650771 未加载
Benney_大约 2 年前
3D CSS is actually super powerful, and once you wrap your head around how transforms interact with each other you can use it like any other 3D library.<p>Me and a friend made a game using 3D CSS a few years ago: <a href="https:&#x2F;&#x2F;js13kgames.com&#x2F;entries&#x2F;3dc5s" rel="nofollow">https:&#x2F;&#x2F;js13kgames.com&#x2F;entries&#x2F;3dc5s</a>.<p>I&#x27;m not sure I&#x27;d ever use it again for something that large as it&#x27;s a hell of a lot of work but so satisfying once you see the monstrosity you&#x27;ve created running!
robbywashere_大约 2 年前
If Leonardo Da Vinci knew css
评论 #35648774 未加载
评论 #35649249 未加载
xyst大约 2 年前
I wonder what a screen reader reads out when it encounters this
评论 #35650356 未加载
myfonj大约 2 年前
I have used the same approach for plotting named colours in RGB cube [1]<p>[1]: <a href="https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;full&#x2F;poyoyLr" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;full&#x2F;poyoyLr</a>
ramesh31大约 2 年前
Great example of how absurdly powerful (yet simple) CSS is. Try doing this in one line with literally any other UI technology in existence.
throwaway14356大约 2 年前
i made some n dimensional chart one time. it starts with the usual 2D x,y,z axes then rotates as if a cube to the next chart keeping the dots in the same 3D spot ending in 2D and on to the next chart :)<p>(using css where possible ofc)
sideproject大约 2 年前
I&#x27;m more impressed with the domain name.
Giorgi大约 2 年前
Damn is that 1 symbol domain?
xmppfans大约 2 年前
It is very cool!
dist-epoch大约 2 年前
On one hand people are in awe at this, on the other they complain how bloated browsers are and how much functionality is crammed in them and how they wish for a simple &quot;document only web&quot;.<p>Pick one.
Cypher大约 2 年前
It&#x27;s nice
samstave大约 2 年前
Maze runnner. interactions.
efields大约 2 年前
Now make it respond to touch
评论 #35650366 未加载
评论 #35650050 未加载