jQuery непрерывная анимация с «transform: rotateY» всегда в одном направлении

Question

Я хочу непрерывно переворачивать элемент вокруг своей оси Y, отображая четыре изменяющихся текста на передней и задней стороне, и всегда поворачивает его в одном направлении .Каждая функция вызывает следующую, последняя переходит обратно к первой.Тексты изменяются, пока они находятся на обратной стороне, то есть невидимы.(Кстати: я добавил перспективу и градиенты только для того, чтобы сделать направление вращения более очевидным)

Я придумал это (нажмите кнопку, чтобы запустить его):

function turn1() {
  $('#front').css({transform: 'rotateY(180deg)'});
  $('#back').css({transform: 'rotateY(360deg)'}).delay(2000).text('Back1').promise().then(turn2);
};
function turn2() {
  $('#front').css({transform: 'rotateY(360deg)'}).text('Front2'); 
  $('#back').css({transform: 'rotateY(540deg)'}).delay(2000).promise().then(turn3); 
};
function turn3() {
  $('#front').css({transform: 'rotateY(540deg)'}); 
  $('#back').css({transform: 'rotateY(720deg)'}).delay(2000).text('Back2').promise().then(turn4); 
};
function turn4() {
  $('#front').css({transform: 'rotateY(720deg)'}).text('Front1'); 
  $('#back').css({transform: 'rotateY(900deg)'}).delay(2000).promise().then(turn1); 
};


$('#go').on('click', turn1);

.wrapper {
  position: relative;
  margin: 20px auto;
  width: 180px; 
  height: 180px;
  font-size: 36px;
  perspective: 150px;
}
#front, #back {
  position: absolute;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  transition: transform 2s;
  backface-visibility:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#front { 
  background: linear-gradient(to right, #afc, #4be); 
}
#back { 
  background: linear-gradient(to right, #fa0, #0fa); ; 
  transform: rotateY(180deg);
}

.x {
  text-align: center;
} 
button {
  padding: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="front">Front1</div>
  <div id="back">Back1</div>
</div>
<div class="x"><button id="go">Press to Start</button></div>

Как видите, после четвертого поворота (когда снова вызывается первая функция) элемент быстро поворачивается назад на 540 градусов.Я не могу найти способ вернуть Y-образное вращение в начальное положение 0 и 180 градусов, не поворачивая его обратно в другом направлении.Я попытался добавить «функцию сброса» в конце цепочки функций, которая должна устанавливать параметры преобразования в их начальные значения (без анимации), но это ничего не меняет относительно предыдущего поведения.

Что я здесь не так делаю?Это вообще возможно?

function turn1() {
  $('#front').css({transform: 'rotateY(180deg)'});
  $('#back').css({transform: 'rotateY(360deg)'}).delay(2000).text('Back1').promise().then(turn2);
};
function turn2() {
  $('#front').css({transform: 'rotateY(360deg)'}).text('Front2'); 
  $('#back').css({transform: 'rotateY(540deg)'}).delay(2000).promise().then(turn3); 
};
function turn3() {
  $('#front').css({transform: 'rotateY(540deg)'}); 
  $('#back').css({transform: 'rotateY(720deg)'}).delay(2000).text('Back2').promise().then(turn4); 
};
function turn4() {
  $('#front').css({transform: 'rotateY(720deg)'}).text('Front1'); 
  $('#back').css({transform: 'rotateY(900deg)'}).delay(2000).promise().then(reset1); 
};
function reset1() {
  $('#front').css({transform: 'none'});
  $('#back').css({transform: 'rotateY(180deg)'}).promise().then(turn1);
};


$('#go').on('click', turn1);

.wrapper {
  position: relative;
  margin: 20px auto;
  width: 180px; 
  height: 180px;
  font-size: 36px;
  perspective: 150px;
}
#front, #back {
  position: absolute;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  transition: transform 2s;
  backface-visibility:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#front { 
  background: linear-gradient(to right, #afc, #4be); 
}
#back { 
  background: linear-gradient(to right, #fa0, #0fa); ; 
  transform: rotateY(180deg);
}

.x {
  text-align: center;
} 
button {
  padding: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="front">Front1</div>
  <div id="back">Back1</div>
</div>
<div class="x"><button id="go">Press to Start</button></div>

Answer 1

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

Вот базовый пример:

function turn1() {
  $('#front').css({transform: 'rotateY(180deg)',transition:'2s'});
  $('#back').css({transform: 'rotateY(360deg)',transition:'2s'}).delay(2000).text('Back1').promise().then(turn2);
};
function turn2() {
  $('#front').css({transform: 'rotateY(360deg)'}).text('Front2'); 
  $('#back').css({transform: 'rotateY(540deg)'}).delay(2000).promise().then(turn3); 
};
function turn3() {
  $('#front').css({transform: 'rotateY(540deg)'}); 
  $('#back').css({transform: 'rotateY(720deg)'}).delay(2000).text('Back2').promise().then(turn4); 
};
function turn4() {
  $('#front').css({transform: 'rotateY(720deg)'}).text('Front1'); 
  $('#back').css({transform: 'rotateY(900deg)'}).delay(2000).promise().then(reset1); 
};
function reset1() {
  $('#front').css({transform: 'none',transition:'0s'});
  $('#back').css({transform: 'rotateY(180deg)',transition:'0s'}).delay(200).promise().then(turn1);
};


$('#go').on('click', turn1);

.wrapper {
  position: relative;
  margin: 20px auto;
  width: 180px; 
  height: 180px;
  font-size: 36px;
  perspective: 150px;
}
#front, #back {
  position: absolute;
  width: 100%; 
  height: 100%;
  border-radius: 50%;
  transition: transform 2s;
  backface-visibility:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#front { 
  background: linear-gradient(to right, #afc, #4be); 
}
#back { 
  background: linear-gradient(to right, #fa0, #0fa); ; 
  transform: rotateY(180deg);
}

.x {
  text-align: center;
} 
button {
  padding: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="front">Front1</div>
  <div id="back">Back1</div>
</div>
<div class="x"><button id="go">Press to Start</button></div>