Creating orientation controls for CSS 3D models.

CSS3D Earth by Edan Kwan

Creating 3D in the browser has been very popular in recent years. The most used 3D framework is three.js (there are several others, like babylon.js and PlayCanvas), which all use Javascript to render 3D on canvas.

There is an alternative for creating 3D objects in the browser: utilizing CSS without JS. (Keith Clark: 2013)

X-wing model by Julian Garnier

This article is about how to create 3D CSS movable objects with a splash of JavaScript.

Getting started

Include the coco.js library before the closing <body> tag:

<script src="https://unpkg.com/cocobean/coco.min.js"></script>

And add coco to an element:

document.querySelector('.scene').coco();


In a small apartment in California, 2010, a recently quit software developer wrote a package manager.

As these two platforms developed, one becoming npm, the Javascript package manager, and the other becoming React, an open-source library for building UIs, it seemed as developing apps and websites was as easy as ever.

React

React became popular because it divided sites and apps into “Components”, or parts of a user interface. Designers create Components, then another member of the team just drags and drops them as needed, just like completing a puzzle.

Then Google came into the mix, presenting their Material Design, a…

Bar Hatsor

Getting creative.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store