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
How to Use Two Ngfor in HTML Angular 4
How to Do a Post Request in HTML Without Opening a New Tab
Fixed Headers on Scroll Inst Working Correctly in Angular Application
Print Page Numbers on Pages When Printing HTML
How to Vertically Center a Div Element For All Browsers Using Css
Position Absolute But Relative to Parent
Css Technique For a Horizontal Line With Words in the Middle
When Submitting a Get Form, the Query String Is Removed from the Action Url
Auto Detect Mobile Browser (Via User-Agent)
Are the Decimal Places in a CSS Width Respected
Html,Css - How to Horizontally Center Two Tables Side by Side
How to Allow Http Content Within an Iframe on a Https Site
How to Set Maximum Height for Table-Cell
How to Embed Pdf File With Responsive Width
How to Vertically Align Elements in a Div
Flexbox Code Working on All Browsers Except Safari. Why