我的图像怎么只会翻转一次？答案

【问题标题】：How is it that my image will only flip once?我的图像怎么只会翻转一次？
【发布时间】：2017-04-19 22:19:12
【问题描述】：

显示了 4 张图像，假设单击时水平翻转图像并使用箭头指示器与另一个图像交换图像。图像交换正在工作，但图像只会翻转一次。

下面是我的代码，怎么不能多次翻转图片？

我已经尝试了几件事，但我似乎无法让它工作..帮助！

<body>
    <h1>My Images Gallery</h1>


    <div class="polaroid">
        <img src="winter.jpg" alt="Winter view" style="width:100%">
        <div class="container">
            <p>Make the image just like this by clicking and moving the tiles</p>
        </div>
    </div>

    <table>
        <tr>
            <td id="a">
                <img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
                <div id="texta">Right top tile</div>
            </td>
            <td id="pijlTop" class="pijl">
                <span onclick="swap('a', 'b')">&#8644</span>
            </td>
            <td id="b">
                <div>
                    <img id="imgb" src="left-top.jpg" alt="Winter view" onclick="flip('imgb')">
                </div>
                <div id="textb">Left top tile</div>
            </td>
        </tr>
        <tr>
            <td id="pijlLeft" class="pijl">
                <span onclick="swap('a', 'c')">&#8645</span>
            </td>
            <td/>
            <td id="pijlRight" class="pijl">
                <span onclick="swap('b', 'd')">&#8645</span>
            </td>
        </tr>
        <tr>
            <td id="c">
                <div>
                    <img id="imgc" src="right-down.jpg" alt="Winter view" onclick="flip('imgc')">
                </div>
                <div id="textc">Right bottom tile</div>
            </td>
            <td id="pijlBottom" class="pijl">
                <span onclick="swap('c', 'd')">&#8644</span>
            </td>
            <td id="d">
                <img id="imgd" src="left-down.jpg" alt="Winter view" onclick="flip('imgd')">
                <div id="textd">Left bottom tile</div>
            </td>
        </tr>
    </table>
    <script>
        function flip(a) {
            var img = document.getElementById(a);
            if (img.style === 'img'){ 
            img.style = "transform:rotate(180deg);";
            }
            else {
                img.style = "transform:rotate(180deg);";
            }
        }

        function swap(a, b) {
            var atext = document.getElementById("text" + a).innerHTML;
            var btext = document.getElementById("text" + b).innerHTML;
            var aimg = document.getElementById("img" + a).src;
            var bimg = document.getElementById("img" + b).src;

            document.getElementById("text" + a).innerHTML = btext;
            document.getElementById("text" + b).innerHTML = atext;
            document.getElementById("img" + a).src = bimg;
            document.getElementById("img" + b).src = aimg;
        }
    </script>
</body>

【问题讨论】：

转换不是累积的，所以如果你应用transform:rotate(180deg)，你会得到一个颠倒的图像，然后如果你再次应用transform:rotate(180deg)，你会得到......同样的颠倒图像.

标签： javascript html rotation image-rotation flip

【解决方案1】：

您是否尝试过更改此行

else {
    img.style = "transform:rotate(0deg);";
}

这应该可以解决它！

【讨论】：

也做了一些小的改动，很高兴有更多的选择！

【解决方案2】：

看看这个sn-p！

$('.container').click(function() { 
    $(this).toggleClass('active');
});

.container {
    width: 400px;
    height: 400px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
.active {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <img src="http://placehold.it/400x400"/>
</div>

【讨论】：

【解决方案3】：

transform:rotate(180deg) 始终设置相对于原始图像的旋转。这就是您的代码仅旋转图像一次的原因。如果您想再次翻转图像，您应该检查它是否被翻转，如果是，请将其设置回transform:rotate(0deg)。这是简单的 javascript 实现，因为我注意到您没有使用 jQuery。

HTML：

function flip(a) {
  var img = document.getElementById(a);
  if(img.classList.contains('flipped')){
    img.classList.remove('flipped');
  } else {
    img.classList.add('flipped');
  }
}

CSS：

.flipped {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

获奖fiddle。

【讨论】：

@MariaT，您应该投票赞成您认为有帮助的答案，并接受最能解决您问题的答案。