我正在尝试创建一个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}
谢谢!
答案 0 :(得分: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;
如果你希望它落在你身上,那么最终的角度必须是负面的
结果: