Archive for the ‘3d’ Category

Experimental 3D Room Exhibition Layout

View demo Download source Today we’d like to share an experimental 3D layout with you. The idea is to show some information about a gallery’s exhibition in an interesting way. Each artist has a “room” in the gallery which shows...

Building Gorgeous 3D Maps with eegeo.js and Leaflet

eegeo.js is an open source 3D maps API built on top of Leaflet, the popular mapping library. There are many mapping libraries that allow you to embed or build simple, 2D maps. Notably Google Maps, Bing Maps, HERE, Mapbox and OpenStreetMap. Popular mapp...

Reactive Audio WebVR

Posted on: No Comments
Virtual reality has become a thing again! All of the usual suspects are involved: HTC, Microsoft, Samsung, and Facebook, among others, are all peddling their respective devices. These predictable players shouldn’t be having all the fun, though! You m...

Cubes Advent Calendar

View demo Download source Today we’d like to share a fun little Advent calendar with you. The idea is mainly inspired by the Singles 2016 page of Adult Swim. When hovering over the boxes, they rotate in a fun way and when we click on a box, all ...

The State of Responsive 3D Shapes

Posted on: No Comments
As some people might know, I've always loved 3D geometry. Which has meant getting drawn towards playing with CSS 3D transforms in order to create various geometric shapes. I've built a huge collection of such demos, which you can check out on CodePen. ...

Building a JavaScript 3D Minecraft Editor

Posted on: No Comments
I've always wanted to build a 3D game. I've just never had the time and energy to learn the intricacies of 3D programming. Then I discovered I didn't need to... While tinkering one day, I got to thinking that maybe I could simulate a 3D environment usi...

Things to Watch Out for When Working with CSS 3D

Posted on: No Comments
I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were som...

Things to Watch Out for When Working with CSS 3D

Posted on: No Comments
I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were som...

Slicing SVG 9 Ways

Posted on: No Comments
Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well: The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity, since they can be handed off to...

Isometric and 3D Grids

View demo Download source Today we’d like to share some isometric grid styles with you. The inspiration comes from the Hotchkiss website where an isometric, scrollable grid is shown with some cool hover effects. In our first experiment we create...