How to Rotate the Block Every Time You Click on the Button

How to rotate the block every time you click on the button?

You need to keep a running total in now so that you can keep incrementing. For example:

var now = 0;

$('.left').click(function() {
now += 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});

$('.right').click(function() {
now -= 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});

As another person has just pointed out, your spaces between rotate and ( were also breaking it.

Here's a CodePen if you need it: https://codepen.io/MSCAU/pen/MZgqop

CSS animation, toggle rotate on click

You don't really need a keyframe animation for something this simple. If you just add a class to your icon on click then remove it this will apply your rotation. Here is a working plunkr using font awesome and a simple rotation. This is just a simple example, you will want to make use of vendor prefixes and be aware that css transitions do not work in older browsers.

<div id="container">
<i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
transform: rotate(0deg);
transition: transform 1s linear;
}

.fa-arrow-down.open{
transform: rotate(180deg);
transition: transform 1s linear;
}

(function(document){
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var open = false;

div.addEventListener('click', function(){
if(open){
icon.className = 'fa fa-arrow-down';
} else{
icon.className = 'fa fa-arrow-down open';
}

open = !open;
});
})(document);

Stop start function on button click

You can set class to detect if img has clicked or not:

Self Click Version:

var img = $(".inner");var offset = img.offset();
function mouse(evt) { var center_x = (offset.left) + (img.width() / 2); var center_y = (offset.top) + (img.height() / 2); var mouse_x = evt.pageX; var mouse_y = evt.pageY; var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); var degree = (radians * (180 / Math.PI) * -1) + 90; img.css('-moz-transform', 'rotate(' + degree + 'deg)'); img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); img.css('-o-transform', 'rotate(' + degree + 'deg)'); img.css('-ms-transform', 'rotate(' + degree + 'deg)');}
img.on('click', function(e) {
$(this).toggleClass('clicked');
});
img.on('mousemove', function(evt) { if (!img.hasClass('clicked')) { mouse(evt); }});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="inner" style="width:100px; height:100px; background-color:black; display:block; ">

CSS3 transition on click using pure CSS

If you want a css only solution you can use active

.crossRotate:active {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO).

$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});

Fiddle

My function runs only once

In the if-else block in copyEmails you specify, that the button will rotate for one second, if the animation-style isn't set "to rotate 1s". But if it is, it will just set the animation-style to none.

If you click on the button a third time, you will notife, that it will rotate again. This is because with the 2nd click, you have set the animation Style to none again.

This means, your Button will switch and rotate every 2nd click!

To let the button rotate everytime you click, change the if-else block to:

copyEmailsButton.style.animation = "rotate 1s";
setTimeout(function() {
copyEmailsButton.style.animation = "none"
}, 1000);

This sets the animation style to none again after the animation is finished, every time you click the button.

jQuery rotate cube when the button is clicked

http://jsfiddle.net/ysLet/3/

seems like the += operator does not work in the css line

    $(document).ready(function(){
deg = 0;
$('button').click(function(){
deg += 45;
$('#cube').css('-webkit-transform','rotateY('+deg+'deg)');
});
});

this did the trick...



Related Topics



Leave a reply



Submit