用CSS动画弹出书本效果

所以我想制作一个弹出式书籍效果，但仅限2D。（所以不像beercamp页面）。用CSS动画弹出书本效果

理想的结果：

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）不产生任何输出，为什么呢？）

来源

2013-05-17 louisdeb

添加一个容器元素，并使用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-17 21:04:36 Blender

工作几乎完美 - 我需要有透视吗？首先要创建一个扁平物体，然后删除透视图（透视图：0px;）。 – louisdeb

哦，如果我用-webkit-transform替换变换，是否需要在其他浏览器中包含原始的'transform：'函数，或者是否可以完全替换为'-webkit-transform'： – louisdeb

@louisdeb：是'-webkit-'属性仅适用于Webkit浏览器。 – Blender

用CSS动画弹出书本效果

回答

相关问题