1

У меня есть 3D-анимация колеса / цилиндра css, которая вращается по оси x. Моя проблема в том, что анимация движется вверх и вниз за пределами контейнера. Пример GIF ниже ...

введите сюда описание изображения

Код для вышеперечисленного можно найти здесь: https://jsfiddle.net/thelevicole/bkt0v1mc/

(function($) {

  const $wheel = $('.wheel .wheel__inner');
  const items = 28;
  const diameter = $wheel.height();
  const radius = diameter / 2;
  const angle = 360 / items;
  const circumference = Math.PI * diameter;
  const height = circumference / items;

  for (let i = 0; i < items; i++) {
    var transform = `rotateX(${ angle * i }deg) translateZ(${ radius }px)`;

    $('<div>', {
      class: 'wheel__segment'
    }).css({
      'transform': transform,
      'height': height,
    }).html(`<span>Item ${ i }</span>`).appendTo($wheel);
  }

})(jQuery);
*,
*:before,
*:after {
  box-sizing: border-box;
}

.wheel {
  perspective: 1000px;
  border: 1px solid #333;
  margin: 50px;
}

.wheel .wheel__inner {
  background-color: red;
  position: relative;
  width: 200px;
  height: 350px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 6s;
}

.wheel .wheel__inner .wheel__segment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 50%;
  background-color: #ccc;
}

.wheel .wheel__inner .wheel__segment:nth-child(even) {
  background-color: #ddd;
}

@-webkit-keyframes spin {
  0% {
    transform: rotateX(360deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wheel">
  <div class="wheel__inner">
  </div>
</div>

Красная панель - это контейнер сегментов, это элемент с CSS-анимацией. Красная панель остается внутри контейнера, однако сегменты смещены по вертикали, что выталкивает их за пределы контейнера.

Я могу остановить это движение вверх и вниз, добавив transform-origin: 50% 0; для каждого из сегментов, но это создает новую проблему. Промежутки между сегментами! См. ниже...

введите сюда описание изображения

Код для вышеуказанного https://jsfiddle.net/thelevicole/bkt0v1mc/1/

( function( $ ) {

    const $wheel = $( '.wheel .wheel__inner' );
    const items = 28;
    const diameter = $wheel.height();
    const radius = diameter / 2;
    const angle = 360 / items;
    const circumference = Math.PI * diameter;
    const height = circumference / items;
    
    for ( let i = 0; i < items; i++ ) {
        var transform = `rotateX(${ angle * i }deg) translateZ(${ radius }px)`;

        $( '<div>', {
            class: 'wheel__segment'
        } ).css( {
            'transform': transform,
            'height': height,
        } ).html( `<span>Item ${ i }</span>` ).appendTo( $wheel );
    }
    
} )( jQuery );
*, *:before, *:after {
  box-sizing: border-box;
}

.wheel {
  perspective: 1000px;
  border: 1px solid #333;
  margin: 50px;
}
.wheel .wheel__inner {
  background-color: red;
  position: relative;
  width: 200px;
  height: 350px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 6s;
}
.wheel .wheel__inner .wheel__segment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 50%;
  background-color: #ccc;
  transform-origin: 50% 0;
}
.wheel .wheel__inner .wheel__segment:nth-child(even) {
  background-color: #ddd;
}

@-webkit-keyframes spin {
  0% {
    transform: rotateX(360deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wheel">
    <div class="wheel__inner">
    </div>
</div>

Любая помощь была бы замечательной!

Свободный перевод вопроса CSS 3D animated wheel off center от участника @Levi Cole.

1

1 ответ 1

1

Вы можете исправить это, настроив transform-origin вращающегося элемента, как показано ниже:

transform-origin: 50% calc(50% + height/2);

( function( $ ) {

    const $wheel = $( '.wheel .wheel__inner' );
    const items = 28;
    const diameter = $wheel.height();
    const radius = diameter / 2;
    const angle = 360 / items;
    const circumference = Math.PI * diameter;
    const height = circumference / items;
    
    for ( let i = 0; i < items; i++ ) {
        var transform = `rotateX(${ angle * i }deg) translateZ(${ radius }px)`;

        $( '<div>', {
            class: 'wheel__segment'
        } ).css( {
            'transform': transform,
            'height': height,
        } ).html( `<span>Item ${ i }</span>` ).appendTo( $wheel );
    }
  $wheel.css('transform-origin','50% calc(50% + '+height/2+'px)');
  $wheel.css('margin-top','-'+height+'px'); /* negative margin here to keep the element into the center */
    
} )( jQuery );
*, *:before, *:after {
  box-sizing: border-box;
}

.wheel {
  perspective: 1000px;
  border: 1px solid #333;
  margin: 50px;
}
.wheel .wheel__inner {
  background-color: red;
  position: relative;
  width: 200px;
  height: 350px;
  margin: 0 auto ; 
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 6s;
}
.wheel .wheel__inner .wheel__segment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 50%;
  background-color: #ccc;
}
.wheel .wheel__inner .wheel__segment:nth-child(even) {
  background-color: #ddd;
}

@-webkit-keyframes spin {
  0% {
    transform: rotateX(360deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wheel">
    <div class="wheel__inner">
    </div>
</div>

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

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

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