CSS-анимация разных вращений

Всё сводится к подбору нужной перспективы у контейнера (http://www.w3.org/TR/css3-transforms/#perspective-property)

  perspective: 300px;
  -webkit-perspective: 300px;

А для самого элемента к подбору точки вращения (http://www.w3.org/TR/css3-transforms/#transform-origin-property)

  transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;

и повороту по нужной оси на нужный угол (http://www.w3.org/TR/css3-transforms/#funcdef-rotate)

  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);


Вот пример (элемент «падает» при нажатии):
JS Bin
http://jsbin.com/IrokuPu/1/edit

Можно ещё почитать:
http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/

One Response so far.

LEAVE A COMMENT