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 s

Solution 1:

just do this:

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

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

none seems to be the default value

Solution 2:

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

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

Solution 3:

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:

.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: 100vh;
        height: 100vh;
        top: 0;
        left: 0;
    }

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