回転エフェクトを使用してスパン内のテキストを変更する

Question

ブースト・カット・カルーセルが新しいアイテムにスライドするときに、特定の効果を持つスパン内のテキストを変更しようとしています。関連するテキストは、カルーセルに表示される新しい画像のIDです。

$('.carousel').bind('slide.bs.carousel', function (e) { 
     $('#landing-displayed-item').fadeOut(); 
    setTimeout(function(){ 
     $('#landing-displayed-item').text($('.carousel').find('.active').find('img').attr('id')); 
     $('#landing-displayed-item').fadeIn(); 
    }, 750); 
}); 

をしかし、私はフェードアウト/フェードインではないアニメーションを好きですが、the one seen hereに似た回転効果たい：

次のコードは大丈夫動作します。

そこで私は、次のコードを試してみましたが、それは動作しません（全くアニメーションで、テキストの変更）：

$('.carousel').bind('slide.bs.carousel', function (e) { 
    setTimeout(function(){ 
     $('#landing-displayed-item').text($('.carousel').find('.active').find('img').attr('id')).show().css({ 
      "-webkit-transform": " rotate(0) scale(1)", 
      "-moz-transform": "rotate(0) scale(1)", 
      "-o-transform": "rotate(0) scale(1)", 
      "transform": "rotate(0) scale(1)" 
     }); 
    }, 750); 
}); 

任意のアイデア？

Answer 1

チェックこのデモ：

var count=0; 
 

 
$('a').click(function() { 
 
    $('div').addClass('rotate') 
 
      .delay(500) 
 
      .queue(function(n) { 
 
      $(this).html("Another Text"+count).removeClass('rotate'); 
 
      n(); 
 
      }) 
 
    count++; 
 
});

div { 
 
    font-size: 3em; 
 
    font-family: sans-serif; 
 
    margin-top: 20px; 
 
    transition:all .5s linear; 
 
    transform-origin: center; 
 
} 
 
div.rotate { 
 
    transform:rotateX(-90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"> Change Text</a> 
 
<div>This is text for Slide</div>