0

所以我想制作一个弹出书效果，但仅限 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>

这样做的问题是图像的底层发生了变化，并且图像明显被压缩了。我怎样才能改进它以满足我的需求？

（也作为不旋转3d（xdeg，ydeg，zdeg）的一侧不产生任何输出，为什么？）

4

1 回答 1

0

添加一个容器元素并使用该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-前缀添加支持。

于 2013-05-17T21:04:36.010 回答