css - 在不垂直移动的情况下从底部原点翻转卡片

Question

我正在尝试创建一个 rolodex 类型的东西，其中涉及使用 transform-origin:bottom 在 x 轴上旋转的卡片；

它有点工作，但在动画期间卡片垂直移动，因此它消除了“静止向下翻转”效果。

如何让卡片从底部旋转，同时保持静止

它也缺乏 3d 视角。关于如何使卡片在旋转时看起来像是朝您(z 轴)落下的任何建议？

哈姆:

.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}

Pen here

谢谢!

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;

如果你想让它落向你，最后的 Angular 必须是负数

结果:

codepen