Erik McFarland Erik McFarland - 8 months ago 83
HTML Question

JQuery set CSS Transform, Translate Properties in Class

I cannot seem to set the CSS properties of transform using Jquery.

Here is my Code:

These are the two methods I have unsuccessfully tried.

'-webkit-transform' : 'translate(left, top)',
'-moz-transform' : 'translate(left, top)',
'-ms-transform' : 'translate(left, top)',
'-o-transform' : 'translate(left, top)',
'transform' : 'translate(left, top)'

$('.slideToCart').css('transform', 'translate(50px, 50px)');
$('.slideToCart').css('-webkit-transform', 'translate(50px, 50px)');

Thank You,


I think important thing about css method is that it is not changing your class property, but it is changing style property of object that you are calling it on.

This will do:

$( document ).ready(function() {
        var button = $(this).find("button");

        var position = $('.target').position();
        var left = position.left + 'px';
        var top = + 'px';

        var buttonHolder = $(this);

        setTimeout(function() {
            buttonHolder.css({'transform' : 'translate(' + left +', ' + top + ')'});
        }, 1000);