Невозможно использовать анимацию нескольких кубов - PullRequest
Новая
       10

Невозможно использовать анимацию нескольких кубов

0 голосов
/ 03 апреля 2019

У меня есть один блок, и в этом блоке я хочу повернуть 3-4 изображения в стиле 3D-куба.Я хочу, чтобы через 2 секунды изображения продолжали вращаться, но не могу сделать это правильно

вот мой HTML-код 

 <div class="row no-gutters">

  <div class="col-lg-12">

    <div class="cube">
        <div class="flippety">
            <img src="assets/img/1.jpg" class="img-fluid">
        </div>
        <div class="flop">
            <img src="assets/img/2.jpg" class="img-fluid">
        </div>
        <div class="lop">
            <img src="assets/img/3.jpg" class="img-fluid">
        </div>
    </div>


  </div>

Это мой CSS-код 

.cube {

    height: 370px;

    -webkit-transition: -webkit-transform .33s;
    transition: transform .33s; /* Animate the transform properties */

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; /* <-NB */
    animation: rotates 5s linear infinite;
}

/* The two faces of the cube */
.flippety,.flop,.lop {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);

    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    height: 370px;
}

/* Position the faces */
.flippety {
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}

.flop {
    -webkit-transform: rotateX(-90deg) translateZ(-100px);
    transform: rotateX(-90deg) translateZ(-100px);
}
.lop{
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);   
}
@keyframes rotates{

    0%{
        transform: rotateX(0deg);
    }
    25%{
        transform: rotateX(90deg);
    }
    50%{
        transform: rotateX(0deg);

    }
    100%{
        transform: rotateX(90deg);

    }
}

Я пыталсявсе возможные способы сделать мою анимацию, но не удалось.Пожалуйста, дайте мне знать, что я должен сделать, чтобы оживить несколько изображений куба.

...