It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
David DeSandro has loads of super cool JavaScript libraries he’s created over the years. His latest is Zdog, a “round, flat, designer-friendly pseudo-3D engine for canvas & SVG.” It’s only been about a month since he dropped it (although, like any good library, it’s been simmering) and it has been pretty incredible to watch it capture the imagination of loads of designers and developers. … Read article “Zdog”
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 highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for … Read article “Creating Photorealistic 3D Graphics on the Web”
Let’s say we wanted to have something like this:
Clockwise circular (cyclic) distribution with partially overlapping items.At first, this doesn’t seem too complicated. We start with 12 numbered items:… Read article “Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items”
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 fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than … Read article “Simplifying CSS Cubes with Custom Properties”
The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand new at the time.… Read article “Star Wars Crawl Text”
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 make websites. You know a bit of Javascript. You have a mobile device. You can have a slice of this virtual pie too! WebVR is here, and it’s not that difficult to learn. If you already know the basics of three.js, … Read article “Reactive Audio WebVR”
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.
Because of this, I’ve often been asked whether it would be possible to create responsive 3D shapes using, for example, % values instead of the em values my demos normally use. The answer is a bit … Read article “The State of Responsive 3D Shapes”
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 some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.… Read article “Things to Watch Out for When Working with CSS 3D”
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 the GPU. It will need to be separate to the element it’s shadowing, since we will likely want to fade and move it without affecting the other element.
He tried box-shadow and filter: … Read article “Slicing SVG 9 Ways”
The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space.
Note as for the perspective property, perspective-origin has to be defined on the parent element in order to give the transformed children depth.
The perspective-origin property doesn’t do anything by itself. It has to be defined on an element along with perspective.… Read article “perspective-origin”
