jQuery css multiple Transform attributes wont work

Question

can anyone explain me how to get multiple Transform attributes work in jQuery.css() ?

i have set up a Fiddle to show what I mean

This wont work:

$('.transformMe').css({
    'border':'5px dotted blue',
    '-webkit-transform': 'scale(5) translate(60,25)',
    '-moz-transform': 'scale(5) translate(60,25)',
    '-ms-transform': 'scale(5) translate(60,25)',
    '-o-transform': 'scale(5) translate(60,25)',
    'transform': 'scale(5) translate(60,25)'
});

This results in a new border but the transformation is ignored by the browser.

This Works:

$('.transformMe2').css({
    'border':'5px double green',
    '-webkit-transform': 'scale(5)',
    '-moz-transform': 'scale(5)',
    '-ms-transform': 'scale(5)',
    '-o-transform': 'scale(5)',
    'transform': 'scale(5)'
});

How can I set multiple transform attributes with jQuery ?

Gildas.Tambo · Accepted Answer · 2015-03-19 10:09:01Z

You are missing PX in translate(60px,25px)

$('.transformMe').css({
    'border':'5px dotted blue',
    '-webkit-transform': 'scale(5) translate(60px,25px)',
    '-moz-transform': 'scale(5) translate(60px,25px)',
    '-ms-transform': 'scale(5) translate(60px,25px)',
    '-o-transform': 'scale(5) translate(60px,25px)',
    'transform': 'scale(5) translate(60px,25px)'
});

DEMO USING A BETTER APPROCH AND JQUERY

$('.transformMe').addClass("dottedBlue");

$('.transformMe2').addClass("dottedGreen");

.transformMe{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    top:150px;
    left:150px;
}
.transformMe2{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    top:150px;
    left:450px;
}

.dottedBlue{
    border:5px dotted blue;
    -webkit-transform: scale(5) translate(60px,25px);
    -moz-transform: scale(5) translate(60px,25px);
    -ms-transform: scale(5) translate(60px,25px);
    -o-transform: scale(5) translate(60px,25px);
    transform: scale(5) translate(60px,25px)
}
.dottedGreen{
    border: 5px double green;
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -ms-transform: scale(5);
    -o-transform: scale(5);
    transform: scale(5)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="transformMe"></div>
<div class="transformMe2"></div>

Collectives™ on Stack Overflow

jQuery css multiple Transform attributes wont work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related