Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #32479
| From | Martin Honnen <martin.honnen@gmx.de> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: Rotating something on click |
| Date | 2017-02-05 20:35 +0100 |
| Organization | Liberty Development |
| Message-ID | <o77uq6$c2v$1@news.albasani.net> (permalink) |
| References | <2fae8fa9-b8dd-4aea-9240-453fb6fbbfdc@googlegroups.com> |
On 05.02.2017 19:12, bit-naughty@hotmail.com wrote:
> I want a link, which, when clicked, will rotate stuff - eg. if there
> is a link "Hello" on screen, when it's clicked, I want it to rotate,
> say 90 degrees. How do I do that? I found out about the transition
> property in JS, but I'm unclear on how to code the transition and
> the "transform: rotate" stuff in Javascript....
Like any CSS property, you can set the inline style of an element using
element.style.propertyName
e.g.
element.style.transform = 'rotate(90deg)';
It seems only block level elements and inline blocks are transformable
(https://drafts.csswg.org/css-transforms/#transformable-element), so for
a link to be transformable you need to set display as inline-block as well:
<a href="#" data-angle="0" onclick="rotate(this); return false;"
style="display: inline-block;">Hello</a>
function rotate(element) {
element.dataset.angle = (Number(element.dataset.angle) + 90) % 360;
element.style.transform = 'rotate(' + element.dataset.angle + 'deg)';
}
Sample at https://jsfiddle.net/7og9uctw/3/.
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
Rotating something on click bit-naughty@hotmail.com - 2017-02-05 10:12 -0800
Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-05 19:16 +0100
Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-05 20:35 +0100
Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-05 23:07 -0800
Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-06 12:05 +0100
Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:09 -0800
Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:15 -0800
Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 11:09 +0200
Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 10:40 +0200
Re: Rotating something on click "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-05 13:36 -0800
Re: Rotating something on click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-06 04:58 +0100
Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 03:33 -0800
Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:04 +0100
Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:10 +0100
Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:19 +0100
Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:38 +0100
Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 23:52 -0800
csiph-web