Remove applied CSS transformation

Question

I have applied -webkit-transform:rotateY(180deg); to flip an image. I am applying -webkit-transform:rotateY(0deg); to rotate it back to original position. Now I have some other classes to be applied, but when I check in Chrome Inspect Element I can see that rotateY(0) is still there which should be completely removed.

How can I remove the animation completely from an Element?

.transition
{
  -webkit-transform:rotateY(180deg);
  transform:rotateY(180deg);
}

.notransition {
  -webkit-transform:rotateY(0deg);
  transform:rotateY(0deg);
}

did the answer help you? accept the answer if it has helping you, or post your own answer. — Mark
– Mark, Commented Dec 4, 2015 at 14:58

Mark · Accepted Answer · 2015-08-16 10:40:42Z

51

just do this:

.transition {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.notransition {
  -webkit-transform: none;
  transform: none;
}

none seems to be the default value

edited Aug 16, 2015 at 10:40

answered May 13, 2013 at 8:38

Mark

6,8731 gold badge35 silver badges51 bronze badges

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

4 Comments

hellouworld Over a year ago

But what if I added both rotation and translation and would like to remove only one of them? E.g. I want to remove only rotation. Should I compute the undo value for the rotation and apply it in css then or is there a different way to achieve this?

Mark Over a year ago

transform accepts comma separated values, the order you specify both properties, is also the order you disable the properties. .transition { transform: rotateY(180deg), rotateX(180deg); } .notransition { transform: none, rotateX(180deg); }

hellouworld Over a year ago

Very important and useful. Thank you. Could you, please, provide a source which taught you this?

Mark Over a year ago

I correct my previous comment, it's not comma separated, it's space separated, background properties are comma separated. More info: here you go: developer.mozilla.org/en-US/docs/Web/CSS/transform

Mark · Accepted Answer · 2022-03-11 09:50:05Z

9

.transition {
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

.notransition {
    -webkit-transform:unset;
    transform:unset;
}

edited Mar 11, 2022 at 9:50

Mark

6,8731 gold badge35 silver badges51 bronze badges

answered May 17, 2016 at 7:00

Vikram Singh Katewa

4194 silver badges5 bronze badges

4 Comments

Suresh Ponnukalai Over a year ago

Before answer the question, kindly check wtih the other answers. Don't post duplicate answers.

Vikram Singh Katewa Over a year ago

i have checked other answer and find incorrect because none is not working with transform, so before comment check all answer.

sawe Over a year ago

not sure why you have the downvote, but the 'unset' works for me

Mark Over a year ago

none is the default keyword: please refer to developer.mozilla.org/en-US/docs/Web/CSS/transform

luiscla27 · Accepted Answer · 2022-02-28 00:08:43Z

In my case i needed a way to override an inline transform that was being setted by third party component and i didn't want it to remove it manually.

According to Mozilla documentation, you can only transform elements:

Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

So, you can disable transform by just modifing display to a non-element one, I changed it to display:inline so the transform stops working:

.transition {
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
    
.notransition {
    display: inline;
}

Of course this will mess up with animation, however it's usefull when you are working with responsive CSS:

// small resolution / animation will stop working, and element will expand to the whole screen
.transition {
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

.notransition {
    display: inline;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

// medium resolution / animation works
@media print, screen and (min-width: 40em) {
    .notransition {
       -webkit-transform:unset;
        transform:unset;
    }
}

Collectives™ on Stack Overflow

Remove applied CSS transformation

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related