Question

以下是代码

<html>
<head>
    <title>Facing issue while applying css tranform properties to DOM object using multiple css classes</title>
    <!-- PUT A PATH OF JQUERY LIBRARY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    window.onload = function () {
        var flag = true;
        setInterval(function () {
            if (flag) {
                flag = false;
                $("#spelling_game_score_box_score").addClass("active_score");
            }
            else {
                flag = true;
                $("#spelling_game_score_box_score").removeClass("active_score");
            }
        },2000);
    }
</script>
<style>
    #spelling_game_score_box_score {
        position:absolute;
        top:200px;
        left:200px;
        height: 100px;
        width: 100px;
        transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        font-size: 36px;
        background-color: orange;
    }
    .active_score {
        transform: scale(2);
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
    }
    </style>
</head>
<body>
    <div id="spelling_game_score_box_score">100</div>
</body>
</html>

现在，我在2000毫秒的间隔后运行我找不到scale()效果的代码。但是当我在#spelling_game_score_box_score选择器

下评论关注css时

/*transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);*/

我可以有缩放效果，但找不到旋转效果。我想知道css转换的一些子属性如border有border-color，border-style等等所以我可以对这个问题有一些解决方案。如果您对此有所了解，请帮助我。谢谢。

Answer 1

这里有两个问题：

CSS Specificity
转换css代码

首先，使用id指定转换函数：

gradleLint.rules = ['dependency-parentheses', 'dependency-tuple']

然后，您尝试通过指定类来覆盖它：

#spelling_game_score_box_score {
    ...
    transform: rotate(-30deg);
    ...
}

由于CSS特异性问题而无法正常工作。

您可以通过使其更具体来解决此问题：

.active_score {
    transform: scale(2);
}

但接下来我们讨论了#spelling_game_score_box_score.active_score { transform: scale(2); }覆盖原始转换的第二个问题。

要解决此问题，您可以在同一转换中同时使用transform: scale(2);和rotate。

scale

这是一个工作小提琴：https://jsfiddle.net/uopfapd3/

使用多个css类将css转换属性应用于DOM对象时遇到问题

1 个答案: