Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure #CSS #3D - live on @codepen: https://codepen.io/thebabydino/pen/DyrNrL

#Maths #geometry #polyhedra #css3D #cssTransform #cssTransforms #coding #code #transform #frontend #cssMaths #Sass #web #dev #webDevelopment #webDev #trigonometry #polyhedron #octahedron

A little pure #CSS #3D demo on @codepen: cubic honeycomb https://codepen.io/thebabydino/pen/yNGpxL

#css3D #cssTransform #cssTransforms #code #honeycomb #coding #frontend #web #dev #webDev #webDevelopment

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you for helping me stay afloat during these times.

And second, I just posted a cool little pure CSS 3D thing.

Ko-fi: https://ko-fi.com/post/Pure-CSS-3D-parallax-on-scroll-H2H31MUQ0J

Patreon: https://www.patreon.com/posts/pure-css-3d-on-141272441

#CSS #scroll #3D #SVG #filter #css3d #svgFilter #scrollAnimation #code #web #dev #webDev #webDevelopment #frontend #coding

Because someone just hearted this demo I made over half a decade ago on @codepen:

https://codepen.io/thebabydino/pen/bGEBObR

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry #trigonometry #clipPath #cssClipPath #code #frontend #web #dev #webDev #webDevelopment #coding #transform #cssTransform #css3D

It's definitely not perfect but I made a thing! It's a shiny card effect 🎴 with 3d perspective, done in mostly-pure CSS with a bit of Javascript for cursor positions etc.

📱 Doesn't work very well on mobile at the moment though - it's on my todo list.

In other news, CSS container queries are both fun, useful, and confusing. 📦📦📦

https://starbeamrainbowlabs.com/labs/shinycard.html

#HowDoITag #IDontEvenKnowIJustPostHere #Noodling #WebNoodling #NoodlingAround #CSS #CssVariables #WereUsed #AndAbused #CSS3D

I turn 13 on @codepen today, so after my most hearted demos (https://mastodon.social/@anatudor/114499264888606204)... here are 13 of MY personal faves!

1️⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
#CSS transforms for the #3D, CSS variables for the dynamic shading.

The how 😼 https://www.youtube.com/watch?v=_CV364uqP3U

#css3d #transform #cssTransform #filter #cssFilter #frontend #code #coding #web #dev #webDev #webDevelopment

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE

#geometry #maths #css3D #CSSclipPath #cssTransform #cssTransforms #coding #web #dev #webDev #webDevelopment

Here's a super simple pure #CSS #3D hover effect on @codepen https://codepen.io/thebabydino/pen/ZYYXGLR

*Heavily* commented, every coding choice explained.

#code #coding #cssTransform #css3D #web #dev #webDev #webDevelopment #frontend