Дайте эффект открытия двери, затем перейдите к следующей странице

Question

Я хочу открыть дверь, когда я нажимаю на нее, а затем после завершения анимации открываю следующую страницу

Я пробовал использовать 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%;
 }
}

ОБНОВЛЕНИЕ Размер изображения двери - 522px * 1000 px.Я обновил значение перспективы до 2000, и теперь оно выглядит лучше.Пожалуйста, скажите мне, почему он работал лучше, давая столь большую ценность, и сработает ли это хорошо, если я добавлю бутстрап, чтобы показать 4 двери в одном ряду?

Answer 1

Попробуйте, может быть:

.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 для более подробной информации.