html - 删除应用的 CSS 转换

Question

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

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

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

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

Answer 1

这样做：

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

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

none似乎是默认值

Answer 2

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

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

Answer 3

在我的情况下，我需要一种方法来设置由第三方组件设置override的内联，并且我不希望它手动删除它。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;
    }
}