javascript - 使用旋转效果更改跨度内的文本

Question

当 boostrap 轮播滑到新元素时，我正在尝试更改具有特定效果的跨度内的文本。相关文本是轮播中显示的新图像的 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>