Как повернуть div 360 в 3D по оси Y?

Я пытаюсь воссоздать текст, который вращается 3D по оси Y.Как повернуть div 360 в 3D по оси Y?

Так что я придумал следующее, и он по центру, но ничего (я использую SCSS, кстати) не делают:

<div class="wrapper"> 
    <div id="rotate-wrapper"> 
     <div> 
     Rotate me 
     </div> 
    </div> 
    </div>

Что я могу делать неправильно? Пояснения были бы оценены с целью обучения.

Благодарим вас заблаговременно и принимаем/подтверждаем ответ.

источник

2017-02-09 Jo Ko

Вам необходимо сделать анимацию rotation. На сайте вы указали, он определяется как:

@-webkit-keyframes rotation { 
    0% { 
    -webkit-transform: rotateY(0deg); 
      transform: rotateY(0deg); } 
    50% { 
    -webkit-transform: rotateY(180deg); 
      transform: rotateY(180deg); } 
    100% { 
    -webkit-transform: rotateY(360deg); 
      transform: rotateY(360deg); } } 

@keyframes rotation { 
    0% { 
    -webkit-transform: rotateY(0deg); 
      transform: rotateY(0deg); } 
    50% { 
    -webkit-transform: rotateY(180deg); 
      transform: rotateY(180deg); } 
    100% { 
    -webkit-transform: rotateY(360deg); 
      transform: rotateY(360deg); } }

Для объяснения о том, как CSS анимации работают, см this MDN article.

источник

2017-02-09 19:11:12 Lemmmy

Прежде чем я приму ответ и повышу, как я могу переключить его на другой текст, когда он поворачивается на спину? Также как я могу оптимизировать код, чтобы иметь больше смысла? Я догадывался, когда создавал CSS, поэтому считаю, что он не чист. –

У вас будет два текста, второй - с преобразованием: rotateY (180deg); '. Вы также должны убедиться, что они перекрываются. «Оптимизация» кода не существует - это имеет смысл, как есть. – Lemmmy

Что означает «все» для перехода и «перспективы»? Также, какие проценты, например. 0%, 50% и т. Д. Представляют? –

Как повернуть div 360 в 3D по оси Y?

ответ

Смежные вопросы