CSS Click Chart

3D Transforms

Extends CSS transforms to allow for three-dimensional transforms on CSS-rendered elements.

Specification

CSS Transform Module Level 2 on W3C

Example Code

.container {
  perspective: 400;
}

.object {
  transform-style: preserve-3d; /* auto, flat */
}

.card {
  position: absolute;
  transition: transform 1s linear;
  backface-visibility: hidden;
}

.cfront {
  background: #993102;
  z-index: 2;
}

.cback {
  background: purple;
  transform: rotateY(180deg) translate3d(0, 0, 0);
}

.flipped {
  transform: rotateY(180deg);
}

Live Demonstration

Front

Back

Browser Support

Can I Use transforms3d? Data on support for the 3d-transforms feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles