This presentation was build for latest Chrome or Safari browser.

You are viewing simplified view, but most of the CSS 3D will not work for you, sorry.

A very short introduction to CSS3D transforms

by
Bartek Szopka @bartaz

Browser support

-webkit
-webkit
-webkit
-moz 10 
-ms 10 

2D transforms

2D
transform: translate(200px,100px)
rotate(45deg)
scale(2)
skew(30deg)
matrix(-1,0,0,1,0,0)
;

3D transforms

3D
transform:




;

Perspective

.scene {
;
perspective-origin: 50% 50%;
}
.box {
transform:
}
front
back
left
right
top
bottom
.cube {
transform:
;
transform-style: preserve-3d; /* default: `flat` */
}

.face {

backface-visibility: hidden; /* default: `visible` */
}
<div class="cube">
<div class="face">front</div> translateZ(100px)
<div class="face">back</div> rotateY(180deg) translateZ(100px)
<div class="face">left</div> rotateY(-90deg) translateZ(100px)
<div class="face">right</div> rotateY( 90deg) translateZ(100px)
<div class="face">top</div> rotateX( 90deg) translateZ(100px)
<div class="face">bottom</div> rotateX(-90deg) translateZ(100px)
</div>

Remember

It is not a 3D engine

demos

...but, you can build interesting stuff

SnowStack Gallery, Apple CSS3 Transitions Showcase, 3D Sphere, CSS 3D FPS Concept, Pure CSS 3D City, and many more...

wanna learn more?

Intro to CSS 3D, Understanding CSS 3D, Adventures in 3rd dimension, Safari Guide to CSS transforms, W3C CSS 3D Transforms Module

by
Bartek Szopka @bartaz