Archive for the ‘3d’ Category

Creating Photorealistic 3D Graphics on the Web

Posted on: No Comments
Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use ...

Building a 3D Rotating Carousel with CSS and JavaScript

Posted on: No Comments
A lot has been said on the use of traditional 2D carousels, for example this piece on Smashing Magazine covers this subject. There’s no simple yes or no answer to the ‘should I use a carousel?’ question; it depends on the particular situation. Wh...

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel... outdated and very WET. I thought I should do something to fi...

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...