3D CSS

Hero shots

Alex Walker

@alexmwalker

RWD Article of Faith #1 

"Layouts are groups

of independently, reconfigurable components"

While this is mostly true.. 

Sometimes

the layout 

IS the story.

Other times position matters..

Moving the image changes the message

James looks to the future

James ignores us...

James Cameron's Twitter

Can we easily fix that?

Mostly no..

..with the exception of.. 

(At least, not without a lot of modelling power)

Certain products,... including:

  • Books
  • DVDs & BluRays
  • Video Games
  • CDs
  • Software boxes
  • Any box

How do we usually handle these products?

  1. Studio shoot
     
  2. Photoshop fake it
     
  3. 3d Modeller

And if you want to make any updates, edits or changes?

Rewind.
Start again.

Make a new file/s.

So, what do we start with?

  • Single piece
  • Compress well
  • 1 x http request

Blanks, cover sheets & sleeves

Some simple Markup



<div class="stage"> 

  <div class="model_group">

    <div class="model_back"></div>  
    <div class="model_front"></div>

  </div>

</div>
Save

4 x DIVS

2 DIVs + 4 Pseudo elements

:before

:before

:after

DIV

:before

:after

DIV

Example #1

http://codepen.io/alexmwalker/pen/BNmPmw

PERSPECTIVE

CSS property:
Save
.stage {
    perspective: 800px;
}
Save

What does that number actually mean? 

perspective: 5,000m

(Almost 2D - flat)

perspective: 1,000m

Shapes begin to show a 3rd dimension

perspective: 100m

Shapes are stretched and warped

in all three directions

#1: Rule of Thumb
Save

Perspective = 4  x  Height of model

Human-scale items

Modelling

 

3D transforms

http://codepen.io/alexmwalker/pen/qdmrNL?editors=110
Save

Think of 'perspective-origin' as your CSS camera

CSS property:
Save

perspective-origin'

Use Sass

(or your preferred preprocessor)

 


$modelheight: 200px;

$modelwidth:($modelheight*0.70); 
$modelspine: ($modelheight*0.085);
$modelshadow: ($modelheight/16);

$perspective: $modelheight*4;
Save

Lighting Effects

Layering CSS gradients to mimic lights

Faking Photos...

We need reflections and shadows

Generated CSS Gradient

Multiple backgrounds

The trick is to offset each surface

so the physics made sense.

Demos

3D CSS HERO SHOTS

  1. Pure CSS - Good support - degrades elegantly
  2. Single canonical image to maintain
  3. Re-sizable & Re-posable 
  4. Composition lives in classes (not pixels)
  5. MEDIA queries:  Customize comps per device
  6. Say goodbye to Photoshop / 3D Studio 

ADVANTAGES 

(Or where is too far?)
Save

Pushing Things

Complex Shapes & Folding

http://codepen.io/alexmwalker/pen/PqPzBV?editors=110

  • Reveal interior?
  • Show construction? 
  • Demonstrate Origami? 

CONCLUSION: 

Use Canvas, D3, WebGL etc

Complex angles give unpredictable results

CSS Cylinders

  • 2 x end caps
  • 24 x facets

 Jim Savage - MadebyJam

http://codepen.io/madebyjam/pen/bNERqq?editors=110

 

  • Technically possible
  • Not recommended
  • Use Canvas, D3, WebGL etc

Rendered Environments

Keith Clark

Thanks!

  • Alex Walker
  • @alexmwalker
  • sitepoint.com

3d CSS

By Alex Walker

Made with Slides.com

3d CSS

  • 2,189

More from Alex Walker