弹出一个CSS动画书的影响 [英] Pop up book effect with CSS animations
问题描述
所以，我想打一个立体书的效果，但只能在2D。 （所以不喜欢 beercamp 页）。
So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
理想的结果：
- IMG的底部停留在相同的位置
- IMG开始无形然后弹出（想象它趴在它的后面，然后被抬起，直到它是垂直的）
- 项目应该不会出现太大（如果可能）COM pressed
我已经读入的CSS动画，我能找到最接近的动画
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
所以，我公司生产的这种测试一下：
So I produced this to test it out:
<!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>
这里的问题是，在图像的变化的底部水平，并且该图像是明显的COM pressed。
我怎么能改善这个满足我的需求？
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed. How could I improve this to meet my needs?
（也可作为侧不ROTATE3D（xdeg，ydeg，zdeg）不会产生任何输出，为什么？）
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
推荐答案
添加一个容器元素，并使用变换原产地属性，使其正常转动：
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
演示： http://jsfiddle.net/BEy9f/3/
Demo: http://jsfiddle.net/BEy9f/3/
您需要使用父元素（ #container的）以使视角正常工作。此外，如果 #popup 不在元素的正中心（这就是为什么我把显示：inline-block的在那里），它会出现偏离中心的动画。
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome浏览器支持3D变换为好，这样你就可以使用添加支持-webkit - preFIX
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.
这篇关于弹出一个CSS动画书的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
