CODEWITHSUNDEEP
javascriptjqueryhtmlcssrotation
nowiko
nowiko

Reputation: 2557

Rotate element without return to original state

I want to do rotaion on my div with image on hover. But after I want set rotation to default without rotate div back. I try two ways. Css:

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

}

.rotate:hover
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

And jQuery:

var rotated_elems = [".small-blue-1", ".small-blue-2", ".small-blue-3", ".small-blue-4",
    ".small-blue-5", ".big-blue-6", ".animated_blue_1", ".animated_blue_2", ".animated_blue_3"];
$.each(rotated_elems, function (key, element) {
    $(element).hover(function () {
        $(this).animate(
            {rotation: 360},
            { duration: 500,
                step: function (now, fx) {
                    $(this).css({"transform": "rotate(" + now + "deg)"});
                }
            });
    });
});

In first (css) case elemes rotate back, in sexond (js) element rotate to 360. And on second hover nothing happens. But I want to rotate on the second hower, without back rotation. Can somebody help ?

Upvotes: 0

Views: 368

Answers (2)

Nirdesh Dwa
Nirdesh Dwa

Reputation: 111

<style>
.rotate{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
</style>
<script>
  element.addEventListener("mouseover", rotate, false);

  function rotate(){
    this.classList.add('rotate');
  }
</script>

loop through all the classes you need, but basic point is use mouseover instead of hover.

Upvotes: 1

user3292788
user3292788

Reputation: 417

You have to use mouseover instead of hover. I don't think that it is possible in CSS.

Upvotes: 0

Related Questions