Question

我正在寻找翻转文字的简单方法例如，我目前在

标签中有“Hello”文本，我需要将其翻转为“world”，只需一次，我不需要将其翻转回“Hello”，即使有时也是如此需要我真的不需要保存以前的状态。只需传递新的文本字符串，它就应该翻到更新的文本字符串我知道有很多像https://github.com/daynin/wodry这样的库，但为此我需要在其中提供具有特定样式的span，并对所有可能的翻转文本字符串进行硬编码。我不需要文本的特定部分，我需要立即翻动它请建议实施此方法的最佳方式。

Answer 1

不使用span，以下是您要实现的示例 - 从Hello到word，无需返回（您可以根据需要进行调整：高度，颜色，宽度和其他属性）

HTML：

<div class="flip">
    <div class="item">
        <div class="face front">Hello</div>
        <div class="face back">word</div>
    </div>
</div>

CSS：

.flip {
  -webkit-perspective: 300;
   width: 400px;
   height: 200px;
}
.flip .item.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .item {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .item .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
    z-index: 2;
    text-align: center;
    line-height: 200px;
}
.flip .item .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .item .back {
  -webkit-transform: rotatex(-180deg);
    background-color: green;
    color: black;

}

和一个小功能的JS：

   $('.flip').click(function () {
        $(this).find('.item').addClass('flipped');

    });

小提琴：http://jsfiddle.net/GDdtS/9909/

使用翻转效果更改文本的最简单方法

1 个答案: