How to apply multiple css transform properties using Jquery


Tags: jquery,html,css

Problem :

I tried to apply some dynamic scale and translate css properties some thing like this

var scale="scale(2,2)";
var translate="translate(20,20)";
var prop=scale+" "+translate;
$(this).css({
            "transform":prop
             });

But this is not working. I even tried some thing like this

 prop="'"+scale+" "+translate+"'";
$(this).css({"transform":prop});

Even this not working.Please help to resolve this.



Solution :

As mentioned by Harry, you have to have measurement units on your translate property.

See below:

var scale="scale(2,2)";
var translate="translate(20px,20px)";
var prop=scale+" "+translate;
$(this).css({
   "transform":prop
});

A slightly easier alternative is to do a class change instead, and assign your transform styling to the new class.

Like this:

$(this).addClass('transform-me');

And the CSS

.transform-me {
  transform:translate(20px, 20px) scale(2,2);
}

Doing it this way achieves the exact same results, but it does simplify troubleshooting where the error is occurring (whether it is the CSS or the jQuery causing problems).


    CSS Howto..

    How to decrease the page load time when multiple css are used

    how to change a css of an input if the value of it is not empty in angularJS

    How to call static block with styles.css

    How to use -webkit-appearance: searchfield-results-decoration?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • How to not send images to mobiles in a semantic manner

    Issue with changing how containers look based on values in an MD array

    How can I add a default to my CSS slide show banner?

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to reverse a CSS animation on unchecked state?

    How to apply background color to buttons using css in asp.net?

    How to hide :before in overflow:hidden element

    How can I make my container transparent without making the whole site transparent too?

    How to implement block style for list

    How to make CSS visible only for Opera

    How to force space inbetween a css table (responsive webpage)

    How do I absolute position a div from left to the right using media queries?

    How to customize the size of JCoverFlip?

    How to create responsive text on top of an image?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to solve this HTML/CSS bug? [closed]

    How to apply custom CSS on Facebook comment box plugin

    How can I define fieldset border color?

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to add 'important' to zIndex

    How to use div classes to get my blocks to line up?

    How to make this CSS into a responsive one? [closed]

    Slideshow flickering image on :hover

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    How to distribute floated elements evenly with a dynamic column and row count in CSS?