Воспроизвести преобразование css3 с помощью jquery - PullRequest
Новая
       13

Воспроизвести преобразование css3 с помощью jquery

5 голосов
/ 08 сентября 2011

Привет, кто-нибудь может показать мне, как воспроизвести этот эффект css3 с помощью jquery, используя некоторую скорость задержки / анимации? 

.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

Ответы [ 2 ]

2 голосов
/ 08 сентября 2011

Вот как я мог бы реализовать простой поворот (без учета частоты кадров): 

$(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/

Это демонстрирует простую анимацию. Вы должны быть в состоянии понять, как собрать все остальное.

1 голос
/ 08 сентября 2011

Вот что-то ДОВОЛЬНО близкое к тому, что вы просите.Я уверен, что вы можете настроить его по своему вкусу 

$('.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/

...