Блог

Главная - Вопросы по программированию - повернуть значение, заданное javascraip

повернуть значение, заданное javascraip

#javascript #css #animation

#javascript #css #Анимация

Вопрос:

Я учусь программировать, поэтому создаю приложение для подбрасывания монет. У меня все готово, и теперь я пытаюсь оживить монету… мой план: возьмите случайное значение int (ограниченное 10 или 11) и, и умножьте его на 180. В результате получается количество градусов, на которые повернется монета.

10 оборотов, он возвращается к голове, 11 оборотов, он переворачивается к решке.

Моя проблема: как мне передать это количество градусов обратно в css?

Могу ли я использовать переменную js в качестве значения для «transfor: rotateX (‘js var here’)» в css?

Я понятия не имею, что такое jquerys. Полагаю, я скоро их выучу, но не сегодня вечером. Так что, если есть способ сделать это без них, это было бы здорово…

Заранее спасибо за вашу помощь!! ЭРИк

Комментарии:

1. Каков ваш текущий код без настройки поворота JavaScript?

2. Я понятия не имею, как разместить код, чтобы он был выделен синим цветом. Я вижу код каждого тела вот так. У меня мало что есть, кроме двух раундов divs. первый — это голова. Второе включение, решка, поворачивается на 180 градусов. Оба имеют «backface-видимость: скрытая».

3. Я хочу перевернуть их 10 или 11 раз в зависимости от случайного выбора javascript. Я выяснил, как изменить стиль элемента с помощью JS. Но я не мог понять, как повернуть элемент.

Ответ №1:

Могу ли я использовать переменную js в качестве значения для «transform: rotateX(‘js var here’)» в css?

Нет, но почти… Что вы могли бы сделать, это использовать переменную CSS, подобную so transform: rotateX(var(--rotate)) , и установить значение этой переменной с помощью javascript, например, так coin.style.setProperty('--rotate', rotate) , где coin находится ваш узел монеты и rotate значение, которое вы хотите передать (например 1800deg , или 1980deg ).

 const coin = document.getElementById('coin');

document.getElementById('flip').addEventListener('click', evt => {
    const rotate = 180 * ((Math.random() < .5) ? 10 : 11);
  coin.style.setProperty('--rotate', `${rotate}deg`);
});

document.getElementById('reset').addEventListener('click', evt => {
  coin.style.setProperty('--rotate', '');
}); 
 #coin {
  width: 80px;
  height: 80px;
  border-radius: 50px;
  background-color: #ffd300;
  border: 8px solid #ff8d00;
  text-align: center;
  line-height: 80px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  transform: rotateX(var(--rotate, 0));
  transition: 4s;
} 
 <section>
  <div id="coin">H</div>
  <p>
    <button id="flip">Flip</button>
    <button id="reset">Reset</button>
  </p>
</section>

Комментарии:

1. о! хорошо… Я вижу! Поэтому, когда я нажимаю кнопку «filp», JS возвращает количество градусов этой переменной css и активирует поворот. Это кажется выполнимым… Большое вам спасибо! Я никогда не слышал о переменных css.. И каков самый простой способ активировать вращение? Я обычно использую .mydiv:active{transform …} может ли JS возвращать «активное» значение элементу?

2. Под «активировать» вы подразумеваете запуск вращения? В этом случае я бы сказал, с помощью кнопки. Прослушайте событие щелчка по кнопке, после отправки этого события вычислите поворот и установите переменную CSS. Я обновил фрагмент в ответе

Метки: