Сделайте карту перевернутой снизу, не двигаясь вертикально

Question

Я пытаюсь создать объект типа ролодекс, который будет включать в себя карты, вращающиеся вокруг своей оси x, используя transform-origin:bottom;

Это отчасти работает, но во время анимации карта движется вертикально, поэтому она убирает эффект "неподвижного опрокидывания".

Как сделать так, чтобы карта вращалась снизу, оставаясь неподвижной?

Ему также не хватает трехмерной перспективы. Любые предложения о том, как заставить карту выглядеть так, как будто она падает на вас (ось z) при вращении?

HAML:

.top
  .rolo-w
    #f1_card
      .front.face
        %h1 Lorem Ipsum
      .back.face.center
.bottom

CSS:

.top{
  position:relative;
  height: 50vh;
}
.rolo-w{
  width:400px;
  height: 200px;
  position:absolute;
  bottom:0;
  left:50%;
  margin-left: -200px;
  perspective: 1000;
}

#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 2s linear;
}
.top:hover #f1_card {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
  transform-style: preserve-3d;
  transform-origin:bottom;


}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

}
.face.front{
  background: url("http://placehold.it/400x200");
}
.face.back {
  background-color:green;
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
}
h1{ margin:0; text-align: center}

Ручка здесь

Спасибо!

Answer 1

Проблема возникает из-за того, что transform-origin установлена ​​только в состоянии нахождения. Затем переход включает изменение источника преобразования, а это не то, что вам нужно. переместите transform-origin в базовый стиль:

#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 2s linear;
  transform-origin: bottom;
}
.top:hover #f1_card {
  transform: rotateX(-180deg);
  box-shadow: -5px 5px 5px #aaa;
}

также перспектива должна иметь единицы

perspective: 1000px;

И последний угол должен быть отрицательным, если вы хотите, чтобы он падал на вас

результат:

codepen