How do I rotate a image 360 degree around is own axis in JavaScript?

Question

I have tried for two days now to find a way to rotate my image while i input a button. What i want help with is to help me get the code to rotate a image in Javascript called images[0] around its own axis. I know this may look hard but i have tried aswell and I really need help from professionals.

360 degrees is back where it started, so you can do nothing. But what have you tried? Can you post your code and a link to your jsfidddle? — Xotic750
– Xotic750, Commented Apr 28, 2013 at 10:03
What i am more asking for is if their is any way to do 90 degree rotation while pressing a button, and the rotation 90 degree again while pressing another key ( I have fixed the part with input key thing) — Robin Andersson
– Robin Andersson, Commented Apr 28, 2013 at 10:12
At 90 degrees the image will be side on and not viewable, you also haven't stated around which access you are trying to rotate — Xotic750
– Xotic750, Commented Apr 28, 2013 at 10:23
I am just asking for help to rotate a image 90 degree like this: U (rotate 90degree) c or something like this: < (rotate 90degree) ^ This is a simple illustration of what i want to happen to my image. — Robin Andersson
– Robin Andersson, Commented Apr 28, 2013 at 10:27

Community · Accepted Answer · 2017-05-23 10:25:44Z

1

Based upon Xotic750's jsfiddle, here is an example using animation and @keyframes (using -webkit- prefix, modify for other browsers).

CSS

@-webkit-keyframes r {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
    -webkit-animation: r 2s infinite linear;
}

@-webkit-keyframes y {
    0% { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
    -webkit-animation: y 2s infinite linear;
}

HTML

<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Apr 28, 2013 at 11:02

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:25:44Z

Paul S has provided a much better answer.

Here is an example of rotating an image 90 degrees

CSS

#container {
    position: relative;
    width: 450px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}
#card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

HMTML

<div id="container">
    <div id="card">
        <img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
    </div>
</div>

jsfiddle

Collectives™ on Stack Overflow

How do I rotate a image 360 degree around is own axis in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related