移除已应用的CSS变换

Question

我已经使用-webkit-transform:rotateY(180deg);来翻转一张图片。我正在应用-webkit-transform：rotateY（0deg）;将其旋转回原始位置。现在我有一些其他的类需要应用，但是当我在Chrome检查元素时，我发现rotateY（0）仍然存在，而它应该被完全移除。

如何完全从元素中移除动画？

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

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

- anam

---

将该元素的类移除。 - George

你的意思是像这样吗？ - Vucko

答案有帮助吗？如果答案对您有帮助，请接受答案，或者发布您自己的答案。 - Mark

你可以尝试使用 transform='none' 吗？ - vadivel a

Answer 1

只需执行以下操作：

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

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

none 似乎是默认值

- Mark

---

但是如果我同时添加旋转和平移，并且只想删除其中一个，怎么办？例如，我只想删除旋转。我应该计算旋转的撤销值并在CSS中应用它，还是有其他方法可以实现这一点？ - hellouworld

transform接受逗号分隔的值，您指定属性的顺序也是禁用属性的顺序。 .transition { transform: rotateY(180deg), rotateX(180deg); } .notransition { transform: none, rotateX(180deg); } - Mark

非常重要和有用。谢谢。你能提供一下教你这个的来源吗？ - hellouworld

我更正我的先前评论，它不是逗号分隔的，而是空格分隔的，背景属性是逗号分隔的。 更多信息：请参见此链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform - Mark

Answer 2

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

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

- Vikram Singh Katewa

---

在回答问题之前，请先查看其他答案。不要发布重复的答案。 - Suresh Ponnukalai

我已检查了其他回答并发现它们不正确，因为“none”与“transform”不兼容。因此在发表评论之前，请先检查所有答案。 - Vikram Singh Katewa

不确定为什么您被点踩，但 "unset" 对我有用。 - sawe

"none" 是默认关键字，请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform。 - Mark

Answer 3

在我的情况下，我需要一种方法来覆盖由第三方组件设置的内联transform，而我不想手动删除它。

根据 Mozilla文档，只能转换元素：

只有可转换元素才能被转换。也就是说，所有由CSS盒模型控制布局的元素，除了：非替换的内联框、表列框和表列组框。

因此，您可以通过将显示修改为非元素之一来禁用变换，我将其更改为display:inline，以便变换停止工作：

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

当然，这会影响动画效果，但在处理响应式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;
    }
}

- luiscla27