Let's say we wanted to have something like this:
At first, this doesn't seem too complicated. We start with 12 numbered 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 ideal cube coding patterns you should steer clear of. So let's get started!
#
By
Geoff Graham
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.
#
By
Alex Kempton
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, you might be surprised at how simple it is to get it going. If you haven’t ever used three.js, this will be a fun way to learn it.
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 more complex than a yes/no answer, so I thought it would be a good idea to put it in an article. Let's dive in!
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.
#
By
Chris Coyier
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: blur(), but both aren't performant enough.
He tried an SVG element with a blur filter, but SVG alone can't do 9-slice scaling (necessary to keep the corners from scaling awkwardly).
The winner was using an SVG image but applying it to an element via border-image, which essentially 9-slice scaling.
#
By
Chris Coyier
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.