a very short introduction to CSS3D transforms

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


perspective-origin: 50% 50%;
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> translateZ(-100px) rotateY(-180deg)
<div class="face">left</div> translateX(-100px) rotateY(-90deg)
<div class="face">right</div> translateX( 100px) rotateY( 90deg)
<div class="face">top</div> translateY(-100px) rotateX( 90deg)
<div class="face">bottom</div> translateY( 100px) rotateX(-90deg)
</div>

remember

this is not a 3D engine

  • there is no single coordinate system
  • there is no camera, light, etc.
  • complex scenes are hard to maintain
  • there are rendering order issues
  • hardware accelerated layers are not always good
by
Bartek Szopka
@bartaz