Блог

Главная - Вопросы по программированию - как сделать перевернутую анимацию горизонтальной с помощью CSS и Javascript

как сделать перевернутую анимацию горизонтальной с помощью CSS и Javascript

#javascript #css

Вопрос:

я сделал игру в блэкджек , я хочу, чтобы карты дилера переворачивались задом наперед, все работает, ожидайте, что, когда появятся показанные карты, они будут располагаться одна под другой .. как я могу заставить их появиться в очереди ??

 function TurnDealerCards()
{
    DealerCards.innerHTML = "";

    for (var i = 0; i < DealerArray.length; i  ) {
        var Dealercard = document.createElement('img');
        var random = Math.floor((Math.random() * 10));
        Dealercard.setAttribute("width", 50);
        Dealercard.setAttribute("src", (allCards[random])[(DealerArray[i])]);
        DealerCards.appendChild(Dealercard);
        
    }
    DealerCards.className = 'myDIV';
        

} 
 .myDIV {
            display:inline-block;
            border: 0px;
            width: 50px;
            
            background-color:transparent;
            color: transparent;
            animation: mymove 1s ;
        }
        @keyframes mymove {
            50% {
                transform: rotateY(180deg);
               
            }
        }

   

  
  <table border="0" width="100%" height="100%" style="text-align: center">
          <tr><th id="NewGame" onclick="MakeAnewGame();" style="float:left">
    <img src="media/cards/new game.png" width="100" /><label>change table color</label><input id="changeBGC" type="button" onclick="changeBackground();">
</th></tr>
            <tr><td style="height:100pt;width:100%;font-size:100pt;color:white"><div id="dealer"></div></td></tr>

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

1. Вы устанавливаете myDIV класс на внешнем DealerCards div, но CSS выглядит так, как будто вы хотите применить его вместо этого к каждому отдельному Dealercard пользователю.

2. если вы хотите установить inline внешний div, вы должны использовать display:flex

3. Можете ли вы предоставить некоторую разметку

4. спасибо лавни за дисплей дисплей:flex-встроенный работает, но он переворачивает все карты как 1 часть вместо того, чтобы переворачивать каждую карту

5. это очень, очень длинный код, это единственная часть, которая относится к листанию .. все еще хотите, чтобы я добавил ее?

Ответ №1:

Используйте display:flex для переноса ( myDiv ) и используйте анимацию для каждого img

В js установите animation-delay и увеличьте время один за другим

 var DealerCards=document.getElementById("cards");
DealerCards.innerHTML = "";
var DealerArray=[1,1,1];
    for (var i = 0; i < DealerArray.length; i  ) {

        var Dealercard = document.createElement('img');
        var random = Math.floor((Math.random() * 10));
        Dealercard.setAttribute("width", 50);
        Dealercard.setAttribute("src","jj");
Dealercard.style.animationDelay=(i   0.5 ) 's';
        DealerCards.appendChild(Dealercard);
       
    }
    DealerCards.className = 'myDIV';
         
 .myDIV img{
 
            border: 0px;
            width: 50px;
            animation: mymove 1s;
            background-color:transparent;
            color: transparent;
        }
myDiv {
display:flex;
}
        @keyframes mymove {
            50% {
                transform: rotateY(180deg);
               
            }
        } 
 <div id="cards"></div>

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

1. не могли бы вы объяснить, пожалуйста?

2. да , это работает, но он переворачивает все фотографии сразу, а не одну за другой

3. имя класса вне цикла for отличается?, я изменил его и все равно переворачиваю все сразу

4. функция TurnDealerCards() { DealerCards.innerHTML = «»; для (var i = 0; i

5. он переворачивается горизонтально да , но я хотел, чтобы карты переворачивались одна за другой, а не все как 1 часть, похоже, что все карты имеют одинаковое изображение .. если нет способа это исправить, в любом случае большое вам спасибо :):)

Метки: