CODEWITHSUNDEEP
htmlcss
anam
anam

Reputation: 3913

Remove applied CSS transformation

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

Upvotes: 28

Views: 65738

Answers (3)

Vikram Singh Katewa
Vikram Singh Katewa

Reputation: 419

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

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

Upvotes: 9

luiscla27
luiscla27

Reputation: 6419

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

Upvotes: 1

Mark
Mark

Reputation: 6865

just do this:

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

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

none seems to be the default value

Upvotes: 51

Related Questions