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 seems to be the default value

Answer 2

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

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

Answer 3

就我而言，我需要一种方法来override插入由第三方组件设置的内联transform，并且我不希望它手动删除它。

根据Mozilla documentation，您只能变换元素：

仅可变形元素可以变形。也就是说，所有元素其布局由CSS盒模型控制，但以下情况除外：不可替换内联框，表列框和表列组框。

因此，您可以通过仅将显示修改为非元素显示来禁用转换：

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

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

删除应用的CSS转换

3 个答案: