CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jafar tm
Jafar tm

Reputation: 247

How to add css transform to the current transform value Using jquery?

Currently I have a class with transform value rotate(57deg), when alert

$(".div-1").css("transform") it is giving matrix value.

<style> 
 .div-1{
     transform: rotate(57deg);
     }                 
</style>   
<div class="div-1">Test</div>

I need to add scale(-1, 1) to the existing transform value using Jquery

. so .div-1 transform value become div-1 { transform: scale(-1, 1) rotate(57deg); } How to do this ? Here 57 is just a number , it will change always. so what I need is add scale( -1 , 1) to the current transform value . Please help .

Upvotes: 14

Views: 4949

Answers (3)

Ramya Roy
Ramya Roy

Reputation: 237

<style>
    div {
        -ms-transform: rotate(57deg); // IE 9  
        -webkit-transform: rotate(57deg); // Chrome, Safari, Opera  
        transform: rotate(57deg);
    }
</style>

Upvotes: 1

Aman Goyal
Aman Goyal

Reputation: 109

you can do something like this :

var css = $('.div-1').css("transform");
css = css+" scale(-1,1)";
$('.div-1').css('transform',css);

Upvotes: 6

Rahul
Rahul

Reputation: 2474

ALternate solution is to create two classes as

<style> 
 .div-1{
     transform: rotate(57deg);
     }    
  .div-2{
     transform: scale(-1, 1) rotate(57deg);
     }             
</style>   
<div class="div-1">Test</div>

then in jquery do the following :

if(condition == true){
$(".div-1").addClass("div-1");
$(".div-1").removeClass("div-2");
} else {
$(".div-1").addClass("div-2");
$(".div-1").removeClass("div-1");
}

Upvotes: -1

Related Questions