我想开一个门,当我点击它,然后动画完成后,打开下一页
我曾尝试HTML动画与视角的选择。当门打开时,它变得捉襟见肘,而不致打开。
<div class="tile">
<img src="images/door.jpg" />
</div>
div.tile {
margin:20px;
background:red;
-webkit-animation: example 4s ease 0s infinite alternate;
}
@-webkit-keyframes example {
from {
-webkit-transform: perspective(300) rotateY(-90deg);
-webkit-transform-origin: 0% 0%;
}
to {
-webkit-transform: perspective(300) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
}
UPDATE门图像大小为522px * 1000像素。我的角度值更新到2000年,它现在看起来更好。请告诉我为什么它在给予这么大的价值和意志,如果我实现引导显示4门一行这项工作很好更好地工作?
也许尝试:
.container{
perspective: 300px;
}
div.tile {
width: 100px; /** Otherwise, the width of the div can exceed the width of the window during the animation **/
margin:20px;
background:red;
animation: example 4s ease 0s infinite alternate;
transform-origin: 0% 0%;
}
@keyframes example{
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-90deg);
}
}
HTML:
<div class="container">
<div class="tile">
<!--<img src="images/door.jpg" />-->
<div style="width:100px;height:150px;background:blue"></div>
</div>
</div>
作为昆汀说,动画和变换属性现在是标准配置。您可以访问https://caniuse.com/或MDN了解更多详情。