为什么我的图像只会翻转一次？

Question

显示了 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>

Answer 1

你试过改变这条线吗

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

应该可以解决！

Answer 2

看看这个片段！

$('.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>

Answer 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.

为什么我的图像只会翻转一次？

How is it that my image will only flip once?

html

javascript

rotation

flip

image-rotation