使用 javascript 翻转文本

Question

我有一个沿 Y 轴旋转文本的按钮，使其具有镜像外观。由于某种原因，这不再起作用，因为按钮已放置在子级（弹出窗口）上，而要镜像的文本位于父级上。

是否有一个javascript函数可以用来在单击按钮时旋转父级上的文本/再次单击时将其旋转回来。 （最好是拨动开关）

这是我最初只有一个父页面时的样子：

HTML 链接：

       <li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>

带有文本的 div 的 CSS：

    article .teleprompter
{
    padding: 300px 50px 1000px 100px;
    font-size: 30px !important;
    line-height: 86px;
    z-index: 1;
    background-color: #141414;
   -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

flipx 部分的 CSS：

article .teleprompter.flipx
{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    z-index: 1;
    pointer-events: none;
    padding: 300px 50px 1000px 100px !important;
}

我认为应该可以工作的 JS：

    <script>
        function flipTXT(color)
    {
    if (parent_window && !parent_window.closed) {
    parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
    }
    }
</script>

Answer 1

我认为下面 Bin 的代码中看到的两种解决方案之一可能对您有用：

http://jsbin.com/buqexusamuda/1/

HTML

<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>

CSS

.card, .card2 {
  position: relative;
  animation: all 2.5s;
  perspective: 1000;  
  transition: 0.6s;
  transform-style: preserve-3d;
  width: 90px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  z-index: 1;
  background-color: #ccc;
  color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }

脚本

jQuery(".card").click(function(){
  $(this).toggleClass("flip");
});

Answer 2

最简单的解决方案是使用 jQuery 添加/删除类。如果你可以包含 jQuery，那么你可以按照以下方式做一些事情：

<script>
$(document).ready(function(){
    //Since the text is on the parent, you need to access it.
    var parentWindow = window.opener;

    //This gets the parent's DOM so you can grab the text from the parent window.
    var parentDom = parentWindow.document;

    //This grabs the text you want to transform.
    var targetText = parentDom.getElementsByClassName("teleprompter");

    //This toggles the class
    $(".button").on('click', function(){
        $(targetText).toggleClass("flipx");
    });

});
</script>

我使用了 jQuery 和常规 javascript 的组合，因此您不必滚动自己的代码来添加/删除和检查类。

下面是在你的页面中包含 jQuery 的代码，以防你手边没有它：

此版本适用于较旧的非 HTML 5 兼容浏览器和现代浏览器。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这个只适用于更现代的浏览器：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>