Question

所以我想制作弹出书效果但仅限于2D。（所以不喜欢beercamp页面）。

理想的结果：

img的底部保持在同一位置
img开始不可见然后弹出（想象它躺在它的背上，然后被抬起直到它是垂直的）
项目也不应出现（如果可能）压缩

我已经阅读过CSS动画，我能找到的最接近的动画是

transform: rotateX(xdeg);

所以我制作了这个来测试它：

<!doctype html>

<style type="text/css">

#popup
{
    transform: rotateX(90deg);
    animation-delay: 2s;
    animation-duration: 3s;
    animation-name: popupanim;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes popupanim
{
    from {
        transform: rotateX(90deg);
    }

    to {
        transform: rotateX(0deg);
    }
}
</style>

<body>
    <img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>

问题在于图像的底层变化，图像明显被压缩。我怎样才能改善这一点以满足我的需求？

（也作为一边不是rotate3d（xdeg，ydeg，zdeg）不会产生任何输出，为什么？）

Answer 1

添加容器元素并使用transform-origin属性使其正确旋转：

#container {
    display: inline-block;

    perspective: 600px;  /* Tweak this */
}

#popup {
    transform: rotateX(90deg);
    transform-origin: bottom;
}

演示：http://jsfiddle.net/BEy9f/3/

您需要使用父元素（#container）才能使透视图正常工作。另外，如果#popup不在元素的确切中心（这就是我将display: inline-block放在那里的原因），它将在动画中偏离中心。

Chrome也支持3D转换，因此您可以使用-webkit-前缀添加支持。

使用CSS动画弹出书籍效果

1 个答案: