Reproduce css3 transformation with jquery

Question

hi is there anyone can show me ho to reproduce this css3 effect with jquery using some delay/animation speed ?

.element:hover{
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:9999;

}

JSFIDDLE

isn't this just scaling the element's width and height? – Brian Glaz Sep 08 '11 at 01:29 — Brian Glaz, Sep 08 '11 at 01:29

score 2 · Answer 1 · edited May 23 '13 at 21:01

2

Here's how I might go about implementing a simple rotation (not taking frame rate into account):

$(function(){
    (function(n){
        this.interval = n;
        this.transform = {
            'rotation': 0
        };

        this.start = function(){
            setInterval(this.update, this.interval);
        };

        this.update = function(){
            this.transform['rotation'] = (this.transform.rotation + 10) % 360;
            $('div').css('transform', 'rotate(' + this.transform.rotation + 'deg)');
        };
        return this;
    })(30).start();
});

http://jsfiddle.net/dbrecht/82aUL/1/

This demonstrates a simple animation. You should be able to figure out how to put the rest of it together.

edited May 23 '13 at 21:01

Roko C. Buljan

196,159
39
305
313

answered Sep 08 '11 at 01:35

Demian Brecht

21,135
5
42
46

ehm .. :P ... don't know but for me that code doesn't works on jsfiddle :( – itsme Sep 08 '11 at 12:07
yep :p brian answer is definitive ;) – itsme Sep 08 '11 at 15:40
uhm found problem also on brian's :P – itsme Sep 08 '11 at 15:41

score 1 · Accepted Answer · answered Sep 08 '11 at 14:13

1

Here is something PRETTY close to what you are asking. I'm sure you could tweak it to your liking

$('.element').hover(function(){

    $(this).css('position','relative').animate({
        height: $(this).height()*1.3,
        width: $(this).width()*1.3,
        left: '-=' + $(this).width() /4,
        top: '-=' + $(this).height() /4,
        'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px'
    },'fast');
},
 function() {                 
       $(this).css('position','relative').animate({
        height: $(this).height()/1.3,
        width: $(this).width()/1.3,
        left: 0,
        top: 0,
        'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) / 1.3 + 'px'
    },'fast');
}            

);

http://jsfiddle.net/dTkhM/2/

answered Sep 08 '11 at 14:13

Brian Glaz

15,468
4
37
55

uhmmm ... try passing many time recursively mouse over and mouse out :P – itsme Sep 08 '11 at 15:42
2

I did say it's not perfect didn't I? The problem is when you change the width and height of the div, it scales from the top left corner, and not the middle like with the css3 transform. In order to fix this I had to mess with changing the TOP and LEFT properties, but I don't know what the correct values for them should be. The other issue is that I'm not sure what CSS does with decimal values, like font-size: 13.313452px for example. – Brian Glaz Sep 08 '11 at 16:21
yep it wasn't offenseve my tone ;) it was just to say that your code is pretty perfect but i can't accept the answer at all cause of that little bug ;) – itsme Sep 08 '11 at 16:47
I understand. I'm surprised jquery doesn't have these kind of effects built in. They are all available with scriptaculous, but that's built on prototype, and not jquery. – Brian Glaz Sep 08 '11 at 16:53

Reproduce css3 transformation with jquery

2 Answers2