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); }

SCRIPT

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>

用javascript翻转文本

2 个答案: