In a previous question, I asked how to make a "cursor mirror," meaning if your cursor were to move around in the top portion of a site, a separate inversed image of a cursor would move in the inverse direction in the bottom portion of a site. Link to question here.
Continuing with this code, if the actual cursor in the top half hovered over a div to make it disappear (using CSS hover states), how would the mirror-image cursor achieve the same effect using Javascript without using the .mouseover event (since it's not mouse but a placed image)? Sorry if the title is vague, but the problem is hard to describe!
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
placeCursor(event.pageX, newY);
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
.rightside-up:hover{
opacity:0;
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<div class="top-half-black">
<div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"> Blah blah blah</div>
</div>
You can do it like this:
function hideDiv() {
$(".upside-down").hide();
}
function showDiv() {
$(".upside-down").show();
}
$(".rightside-up").hover(hideDiv, showDiv);
You could use the onmousemove event on the whole document, and then check if the inverse cursor is over the element in question. Lets say you want to simulate a mouse move event for the inverse cursor over an element with ID hover.
//Save a reference to the element for speed.
var hover = $("#hover");
//When the mouse moves anywhere.
$(document).mousemove(function() {
//I assume you have the position of the inverse cursor in variables x and y.
//I guesse the solution to your previous question should give you that.
//Save the distance between the inverse cursor and the top left corner of #hover.
var diffX = hover.offset().left - x;
var diffY = hover.offset().top - y;
//Check if the shadow cursor is inside #hover.
if(diffX >= 0 && diffX <= hover.width() && diffY >= 0 && diffY <= hover.height()) {
//Things here will run if the inverse curser is inside hover.
}
else {
//Thigs here will run if the inverse cursor is not inside hover.
}
}
The code would be neater if you could use .elementFromPoint(), but Mozilla advises against using it as it is "experimental technology".
One option would be to use the adjacent sibling selector ~ to allow you to control the style of .upside-down when hovering over top-half-black. E.G:
.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
opacity:0
}
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
placeCursor(event.pageX, newY);
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
/*.rightside-up:hover{
opacity:0;
}*/
.top-half-black:hover .rightside-up,
.top-half-black:hover ~ .bottom-half-white .upside-down {
opacity:0
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<div class="top-half-black">
<div class="rightside-up">Blah blah blah</div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"> Blah blah blah</div>
</div>
UPDATE...
Further to your comment, you could use document.elementFromPoint(x, y) to find the element under the mirrored cursor image and toggle its class name:
var $img = $('#mirror-image');
var imgHeight = $img.height() / 2;
function placeCursor(x, y){
$img.css({top: y + 'px', left: x+ 'px', position:'absolute'});
}
$(".top-half-black").mousemove(function(event){
var newY = $(this).height() - event.pageY - imgHeight;
var x = event.pageX,
y = $(this).height() + event.pageY;
$(".upside-down .hovered").removeClass("hovered");
placeCursor(x, newY);
var mirrorEl = document.elementFromPoint(x, y);
$(mirrorEl).addClass("hovered");
});
body{
margin:0px 0px 0px 0px;
}
.top-half-black{
background-color:black;
width:100%;
height:50%;
}
.bottom-half-white{
position: relative;
}
#mirror-image{
left: 0;
top: 0;
position: absolute;
width: 17px;
height: 25px;
}
.rightside-up{
font-family:Arial;
font-size:36px;
color:white;
}
.rightside-up span:hover{
opacity:0;
}
.upside-down span.hovered{
opacity:0;
}
.upside-down{
font-family:Arial;
font-size:36px;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-half-black">
<div class="rightside-up"><span>Blah</span> <span>blah</span> <span>blah</span></div>
</div>
<div class="bottom-half-white">
<img id="mirror-image" src="http://i.imgur.com/cjjNbk1.png" />
<div class="upside-down"><span>Blah</span> <span>blah</span> <span>blah</span></div>
</div>
Related
I have made a custom cursor but it is not working properly over text(p, h1, button, span). Here is the code
html:
<!-- custom cursor -->
<div class="cursor"></div>
js:
const cursor = document.querySelector(".cursor");
document.addEventListener("mouseover", (e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
console.log(e.pageX, e.pageY); // i checked pageX and pageY values also not change when cursor moves over a text or button
})
css:
.cursor{
position: fixed;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #ffffff38;
transition-duration: 0.16s;
-o-transition-duration: 0.16s;
-moz-transition-duration: 0.16s;
-webkit-transition-duration: 0.16s;
transition-timing-function:ease;
-o-transition-timing-function:ease;
-moz-transition-timing-function:ease;
-webkit-transition-timing-function:ease;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
/* display: none; */
z-index: 10000;
}
It is working fine over links. Can you tell me how can i make the cursor to move smoothly(over all text and buttons)
The mouseover event triggers when you move your mouse over an element - but it doesn't keep triggering when you move the mouse inside that element.
Have you tried mousemove instead?
I think below code will help you. There are some mistakes in your code like background color of cursor background-color: #ffffff38;, this is white which can't be seen in white page. And also I hide the original cursor.
In JavaScript code you have used mouseover which will trigger every time when your mouse enter the specific area, you should use mousemove, it will trigger everytime when you move your mouse.
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
console.log(e.pageX, e.pageY);
// i checked pageX and pageY values also not change when cursor moves over a text or button
})
html{
cursor: none;
}
.cursor {
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid black;
z-index: 10000;
}
<!-- custom cursor -->
<div class="cursor"></div>
I need help regarding the translate-animate property.
There's an image I want to translate in the upward direction when I scroll down on the page.
Now I know I can use the property translateY(px) to move it but then I don't know how to translateY while scrolling.
I want to make my webpage look like this
https://www.apple.com/uk/iphone/
As you can see when you scroll down the image translates upwards with a smooth flow.
I need a code such that I can translate my image upward smoothly on scrolling down.
P.s- This is my first question, sorry if I am not clear.
This is rather cheap parallax effect that I made myself but does not require any special magic to work... Link to my original demo page
let $scrollPrev = 0;
const $viewBottom = () => $(window).scrollTop() + $(window).innerHeight(),
$parallaxIllusion = () => {
const $pxTop = $(".parallaxTop"),
$pxMid = $(".parallaxMiddle"),
$pxBottom = $(".parallaxBottom"),
$scrollCurr = $viewBottom(),
$bodyTop = $("body").offset().top,
$bodyBottom = $bodyTop + $("body").outerHeight(true),
$pxspeed = $scrollCurr - $bodyTop;
if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
$pxTop.css({
"top": 40 + -$pxspeed / 4
});
$pxMid.css({
"top": $pxspeed / 2
});
$pxBottom.css({
"top": ($pxspeed / 4)
});
$scrollPrev = $scrollCurr;
};
};
$(document).ready(() => {
$(window).scroll(() => {
$parallaxIllusion();
});
});
body{
height:700px;
}
.parallaxTop {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center / cover no-repeat;
position: absolute;
left: 50%;
-ms-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
width: 403px;
height: 298px;
z-index: 2;
}
.parallaxMiddle {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(50%, 0);
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 109px;
height: 117px;
z-index: 4;
}
.parallaxBottom {
background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center / cover no-repeat;
position: absolute;
right: 50%;
-ms-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
width: 406px;
height: 443px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="parallaxTop"></div>
<div class="parallaxMiddle"></div>
<div class="parallaxBottom"></div>
</body>
Note that you can edit the code to peak 1 image. Speed or direction is controlled at if level.
I added a ripple effect to happen when the user clicks anywhere on a div. It works well except that when the page is full screen, the element shake and go blurry for until the ripple disappears.
Here's the JS for the effect:
$("div").click(function(e) {
// Remove any old ripples
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("<span class='ripple'></span>");
// Make it round
if(buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
And the CSS:
.ripple {
width: 0;
height: 0;
border-radius: 50%;
background: rgba(249, 107, 107, 0.8);
transform: scale(0);
position: absolute;
opacity: 1;
z-index: 100;
}
.rippleEffect {
animation: rippleDrop .4s linear;
}
#keyframes rippleDrop {
100% {
transform: scale(0.1);
opacity: 0;
}
}
Here's the fiddle but you can't see the issue as it's a minimized preview, so here's another link where you can see it.
Thank you for any help!
Change your code
FIRST:
<div style="visibility: visible; position: fixed;" id="choose" class="centered">
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
</div>
2.
<div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
<h3>You are X, the computer is O.</h3>
<button id="okay">OK</button>
<button id="surprise">No</button>
</div>
You can also add that in your CSS i just paste to you that you can see cahanges!
NOTE - You need chack you YQ code, i can overwrite circle
picture:http://prntscr.com/clwp72
The problem is with this class:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Cancel it and you will not have flickering.
I'm guessing that the problem is with the transform attribute. You insert and remove items into the DOM and it has to recalculate the position.
When I clear all styles from the class- flickering is gone:
Fiddle
I am struggling to get direction-aware hover and css transitions to work properly. Basically I am trying to have a grid of elements with a front and back face, and when on hover have a css transition to flip that element to show the back face.
Transition example (without direction-aware): fiddle
As you can see, no matter which way your mouse enters an element it always flips up. I want it to flip whichever way the mouse enters in/out.
Example:
And here is my attempt with direction-aware: fiddle
I am using jQuery to add classes relevant to the mouse in/out direction.
.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}
.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}
As you can see from the direction-aware example it kind of works but there are major glitches which I can't get my head round. (I've been overthinking this and my brain has just imploded.)
Anyway I hope this makes sense. Thanks.
I have a partial solution to your question.
But I needed to change some of the transitions to animations
$('.box-container .box').each(function() {
$(this).on('mouseenter mouseleave', function(e) {
var $this = $(this),
width = $this.width(),
height = $this.height();
var x = (e.pageX - $this.offset().left - (width / 2)) * (width > height ? (height / width) : 1),
y = (e.pageY - $this.offset().top - (height / 2)) * (height > width ? (width / height) : 1);
// top = 0, right = 1, bottom = 2, left = 3
var dir_num = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
directions = ['top', 'right', 'bottom', 'left'];
// If mouse enter
if (e.type === 'mouseenter') {
// Remove all hover out classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-out-\S+/g) || []).join(' ');
});
// Add in direction class
$this.addClass('hover-in-' + directions[dir_num]);
}
// If mouse leave
if (e.type === 'mouseleave') {
// Remove all hover in classes
$this.removeClass(function(index, css) {
return (css.match(/(^|\s)hover-in-\S+/g) || []).join(' ');
});
// Add out direction class
$this.addClass('hover-out-' + directions[dir_num]);
}
});
});
* {
box-sizing: border-box;
}
.box-container {
padding: 20px;
width: 600px;
}
.box-container:after {
content: '';
display: block;
clear: both;
}
.box-container .box {
float: left;
width: 50%;
height: 200px;
position: relative;
perspective: 600px;
border: 1px solid transparent;
}
.box-container .box .front, .box-container .box .back {
float: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all 1s ease-in-out;
color: white;
font-size: 60px;
}
.box-container .box .front {
background: blue;
transform: rotateX(0) rotateY(0);
z-index: 900;
}
.box-container .box .back {
background: red;
z-index: 800;
}
.box-container .box:hover .front {
z-index: 900;
}
.box-container .box:hover .back {
z-index: 1000;
transform: rotateX(180) rotateY(0);
}
.box-container .box.hover-in-top .front,
.box-container .box.hover-out-bottom .back {
transform: rotateX(-179deg) rotateY(0);
}
.box-container .box.hover-in-top .back,
.box-container .box.hover-out-bottom .front {
animation: Xminus 1s ease-in-out;
}
#keyframes Xminus {
from {transform: rotateX(179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-bottom .front,
.box-container .box.hover-out-top .back {
transform: rotateX(179deg);
}
.box-container .box.hover-in-bottom .back,
.box-container .box.hover-out-top .front {
animation: Xplus 1s ease-in-out;
}
#keyframes Xplus {
from {transform: rotateX(-179deg) rotateY(0);}
to {transform: rotateX( 0deg) rotateY(0);}
}
.box-container .box.hover-in-right .front,
.box-container .box.hover-out-left .back {
transform: rotateY(-179deg);
}
.box-container .box.hover-in-right .back,
.box-container .box.hover-out-left .front {
animation: Yminus 1s ease-in-out;
}
#keyframes Yminus {
from {transform: rotateX(0deg) rotateY(179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
.box-container .box.hover-in-left .front,
.box-container .box.hover-out-right .back {
transform: rotateY(179deg);
}
.box-container .box.hover-in-left .back,
.box-container .box.hover-out-right .front {
animation: Yplus 1s ease-in-out;
}
#keyframes Yplus {
from {transform: rotateX(0deg) rotateY(-179deg);}
to {transform: rotateX(0deg) rotateY( 0deg);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-container">
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
<div class="box">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>
</div>
The problem with animations if that if you leave the div before the animation has ended, the animation will break
But if move slowly, and stay on the divs until the animation ends, this will work ok.
I hope that somebody finds a better solution
I believe that the best way to approach the problem is not to use CSS transitions.
You can easily implement it using jQuery's animate, utilizing jQuery animations queue to keep all of your animations synced.
I modified your example to animate the transition in JavaScript.
Code example
I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like jQuery rotate and Raphaël, but they have the same problem - The image is rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.
Using jQuery rotate like this (http://jsfiddle.net/s6zSn/1073/):
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Results in this:
And this is the result i would like instead:
Anyone have an idea on how to accomplish this?
You use a combination of CSS's transform (with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)
var angle = 0,
img = document.getElementById('container');
document.getElementById('button').onclick = function() {
angle = (angle + 90) % 360;
img.className = "rotate" + angle;
}
#container {
width: 820px;
height: 100px;
overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
width: 100px;
height: 820px
}
#image {
transform-origin: top left;
/* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left;
/* Chrome */
-ms-transform-origin: top left;
/* IE 9 */
}
#container.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
transform: rotate(180deg) translate(-100%, -100%);
-webkit-transform: rotate(180deg) translate(-100%, -100%);
-ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
<button id="button">Click me!</button>
<div id="container">
<img src="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Try this code.
No need for jQuery and lot's of CSS anymore (Note that some browsers need extra CSS)
Kind of what #Abinthaha posted, but pure JS, without the need of jQuery.
let rotateAngle = 90;
function rotate(image) {
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
rotateAngle = rotateAngle + 90;
}
#rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}
<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
CSS can be applied and you will have to set transform-origin correctly to get the applied transformation in the way you want
See the fiddle:
http://jsfiddle.net/OMS_/gkrsz/
Main code:
/* assuming that the image's height is 70px */
img.rotated {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 35px 35px;
-webkit-transform-origin: 35px 35px;
-moz-transform-origin: 35px 35px;
-ms-transform-origin: 35px 35px;
}
jQuery and JS:
$(img)
.css('transform-origin-x', imgWidth / 2)
.css('transform-origin-y', imgHeight / 2);
// By calculating the height and width of the image in the load function
// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
Logic:
Divide the image's height by 2. The transform-x and transform-y values should be this value
Link:
transform-origin at CSS | MDN
Hope this can help you!
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<script>
var angle = 0;
$('#left').on('click', function () {
angle -= 90;
$("#image").rotate(angle);
});
$('#right').on('click', function () {
angle += 90;
$("#image").rotate(angle);
});
</script>
Try it
i have seen your running code .There is one line correction in your code.
Write:
$("#wrapper").rotate(angle);
instead of:
$("#image").rotate(angle);
and you will get your desired output,hope this is what you want.
I think this will work.
document.getElementById('#image').style.transform = "rotate(90deg)";
Hope this helps. It's work with me.
You can always apply CCS class with rotate property - http://css-tricks.com/snippets/css/text-rotation/
To keep rotated image within your div dimensions you need to adjust CSS as well, there is no needs to use JavaScript except of adding class.
Based on Anuga answer I have extended it to multiple images.
Keep track of the rotation angle of the image as an attribute of the image.
function rotate(image) {
let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
image.setAttribute("rotangle", "" + rotateAngle);
}
.rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
Edit
Removed the modulo, looks strange.