时间戳

首页 > 解决方案 > 给出开门效果然后跳转到下一页

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%;
 }
}

更新 门图像大小为 522 像素 * 1000 像素。我将透视值更新为 2000，现在看起来更好了。请告诉我为什么它在提供如此大的价值方面效果更好，如果我实施引导程序以在一行中显示 4 个门，它会正常工作吗？

标签： csshtml

解决方案

尝试一下：

.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>

正如 Quentin 所说，动画和变换属性现在是标准的。您可以访问https://caniuse.com/或MDN了解更多详情。

推荐阅读