Question

我正在尝试创建一个rolodex类型的东西，它将涉及使用transform-origin：bottom;

在x轴上旋转的卡片。

它有点工作，但在动画过程中，卡片会垂直移动，因此它会消除“静止翻转”效果。

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

它也缺乏3D视角。有关如何使卡片在旋转时看起来像是朝向你（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}

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;

如果你希望它落在你身上，那么最终的角度必须是负面的

结果：

codepen

从底部原点翻转卡片而不垂直移动

1 个答案: