How is it that my image will only flip once?

4 images are displayed and it’s suppose to flip the image horizontally on click and swap image with another by using the arrow indicator. The image swap is working, but the image will only flip once.

Below is my code, how is it not possible to flip the image multiple times?

I’ve tried several thing and I can’t seem to get it working.. HELP!

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


    
Winter view

Make the image just like this by clicking and moving the tiles

</div> <table> <tr> <td id="a"> <img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
Right top tile
</td> <td id="pijlTop" class="pijl"> <span onclick="swap('a', 'b')">&#8644</span> </td> <td id="b">
Winter view
Left top tile
</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">
Winter view
Right bottom tile
</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')">
Left bottom tile
</td> </tr> </table> 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; } </body>

Source: stackoverflow-javascript

Unable to get text to rotate on click

I’ve been trying to get this text to rotate once I click the div that it is in, but no matter what I try, it doesn’t work. Any help would be appreciated.

HTML:

    
Ash Gray

+

</div>

CSS:

.listItem {
width: calc(100% - 60px);
height: 53px;
padding: 1px;
margin-left: 60px;
margin-bottom: 5px;
background-color: #9265DC;
font-size:  1.5em;
text-align: left;
line-height: 55px;
color: #fff;
border: 1px solid #9265DC;
border-radius: 5px;
text-decoration: none;
}

.listItem p {
float: right;
line-height: 10px;
text-align: right;
margin-right: 10px;
font-weight: bolder;
}

.rotate {
-webkit-transform:rotate(45deg);
transform-origin: center;
}    

Javascript:


$(function(){
  $(".listItem").click(function(){
  $(".listItem p").toggleClass("rotate");
  });
});


Source: stackoverflow-javascript

CSS rotation by 360 degrees

I want to rotate a rectangle by an angle of 360 degrees (or even > 360 degrees) using CSS. The center of the rotation is “right center”. If I use the following CSS code for a rotation by 180 degrees (and trigger the rotation with JavaScript) it works fine:

@keyframes rotation {
  from {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }

to {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

.rotation {
  animation-name: rotation;
}

However, if I replace the 180 degrees by an angle >= 360 degrees it won’t work anymore. For example in the case of 360 degrees nothing happens because the starting position is equal to the end position of the rotation.

How can I implement rotations by 360 degrees or more?


Source: stackoverflow-javascript