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

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

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

1 2	perspective: 300px; -webkit-perspective: 300px;

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

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

1 2	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);

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

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

Similar Posts