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

Question

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 .

Create a class with the scale in it and then just dynamically add the class to the div: stackoverflow.com/questions/35429935/… — Baruch
– Baruch, Commented Dec 28, 2016 at 6:05
$(".div-1").css("transform","scale(-1,1) rotate("+yourDeg+"deg)"); is not working? — d3vi4nt
– d3vi4nt, Commented Dec 28, 2016 at 6:06

Aman Goyal · Accepted Answer · 2016-12-28 09:34:44Z

6

you can do something like this :

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

edited Dec 28, 2016 at 9:34

answered Dec 28, 2016 at 8:56

Aman Goyal

10910 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jafar tm Over a year ago

Yes this is working . I never thought it is this much simple . When seeing matrix value , i didn't try any thing & i just asked without trying . Thank you friend .

codePG · Accepted Answer · 2017-01-05 11:25:41Z

1

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

edited Jan 5, 2017 at 11:25

codePG

1,7441 gold badge12 silver badges19 bronze badges

answered Dec 30, 2016 at 6:29

Ramya Roy

2474 silver badges10 bronze badges

Comments

Rahul · Accepted Answer · 2016-12-28 06:08:31Z

-1

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");
}

answered Dec 28, 2016 at 6:08

Rahul

2,4802 gold badges12 silver badges17 bronze badges

2 Comments

Jafar tm Over a year ago

This is not correct answer friend . Because here one time either i get scale effect or i get rotate effect . But i need both at a time as i explained .div-1 { transform: scale(-1, 1) rotate(57deg); }

Rahul Over a year ago

once the class div-2 will be applies you will get both effect , what is the issue

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related