Css 给门打开的效果，然后跳到下一页

我想打开一扇门时，我点击它，然后在动画完成后，打开下一页

我尝试了带有透视选项的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%;
 }
}

地砖{
利润率：20px；
背景：红色；
-webkit动画：示例4s-0s无限交替；
}
@-webkit关键帧示例{
从{
-webkit变换：透视（300）旋转（-90度）；
-webkit转换源：0%0%；
}
到{
-webkit变换：透视（300）旋转（0度）；
-webkit转换源：0%0%；
}
}

更新 门图像大小为522px*1000 px。我将透视值更新为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>

---

正如昆廷所说，动画和变换属性现在是标准的。您可以访问或了解更多详细信息。

-webkit animation

-为什么要使用这些属性作为前缀？这是针对那些没有正确实施的实验性的东西。你现在使用的所有属性都有标准的、无前缀的、受良好支持的版本。事实上，我在谷歌上寻找解决方案，发现这一个在银行中有效。您已将平铺宽度固定为100px，但我将使用引导，因此我希望引导自动调整图像宽度。在这种情况下，我无法确定瓷砖的宽度。还有什么解决方案？透视值给出了用户到z=0平面的距离。它的值越小，透视图就越深。查看文档了解更多信息。另外，如果你的问题有变化，你能用你使用的新代码来编辑你的文章吗？