Html 移除应用的 CSS 转换

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16517464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:20:45  来源:igfitidea点击:

Remove applied CSS transformation

htmlcss

提问by anam

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.

我已申请-webkit-transform:rotateY(180deg);翻转图像。我正在申请 -webkit-transform:rotateY(0deg);将其旋转回原始位置。现在我有一些其他的类要应用,但是当我检查 Chrome Inspect Element 时,我可以看到它rotateY(0)仍然存在,应该完全删除。

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

回答by Mark

just do this:

只需这样做:

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

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

noneseems to be the default value

none似乎是默认值

回答by Vikram Singh Katewa

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

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

回答by Luis Limas

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

在我的情况下,我需要一种由第三方组件设置override的内联方法transform,我不希望它手动删除它。

According to Mozilla documentation, you can only transform elements:

根据Mozilla 文档,您只能转换元素:

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.

只能变换可变换的元素。也就是说,其布局由 CSS 框模型控制的所有元素,除了:未替换的内联框、表格列框和表格列组框。

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:

当然,这会弄乱动画,但是当您使用响应式 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;
         }
    }