0

есть такой файл и есть задача сделать, что-бы эти элементы просто крутились.она должна крутитсься как в этом видео: https://youtu.be/bHehkFPLvc0?t=136 только без остановки)

3
  • в этом видео про бутылок говоритсья
    – Randall
    27 мая 2018 в 11:26
  • Зачем мне бутылки?
    – user245150
    27 мая 2018 в 11:29
  • автор жжет!!!!!! 27 мая 2018 в 13:47

1 ответ 1

2

* {
  margin: 0;
}

html,
body {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  perspective: 600px;
}

.items {
  width: 40vw;
  height: 40vw;
  margin: 2vw auto;
  transform: rotateX(30deg);
  perspective: 600px;
  outline:3px solid red;
}

section {
  width: 100%;
  height: 100%;
  margin: -30px -40px;
  white-space: nowrap;
}

.items span {
  display: inline-block;
  width: 30px;
  height: 90%;
  margin: 10px;
  background: green;
  animation: move 4s linear infinite;
  transform: translate(-0, 0)rotateX(-30deg)
}

@keyframes move {
  0% {
    transform: translate(300px, 0)rotateX(-30deg)
  }
  100% {
    transform: translate(-300px, 0)rotateX(-30deg)
  }
}
<div class="items">
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </section>
</div>

6
  • Макс, зеленые полосы, надо было реализовать с виде бутылок)))))
    – Air
    28 мая 2018 в 6:13
  • @Air ак он же вроде бы .. даже картинку показал .. просто вниз ни делал треугольник ..
    – user33274
    28 мая 2018 в 6:28
  • Макс, это была шутка)))) Тебе надо бы повысить уровень чувства юмора))))
    – Air
    28 мая 2018 в 6:36
  • @Air да ..у меня напряжёнка с юмором ...видел мой пример с паралаксом ?
    – user33274
    28 мая 2018 в 6:48
  • Нет, Макс, скинь ссылку
    – Air
    28 мая 2018 в 6:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.