Facing issue while applying css transform properties to DOM object using multiple css classes

Question

Following is the code

<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>

Now, I run the code I can not find scale() effect after interval of 2000 ms. But when I comment following css under #spelling_game_score_box_score selector

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

I can have scale effect but can not find rotate effect. I want to know that is there some sub properties for css tranform like border has border-color, border-style etc. so I can have some solution regarding the problem. Please help me if you have some idea about it. Thank you.

AKS · Accepted Answer · 2016-03-21 05:50:54Z

1

There are two problems here:

CSS Specificity
transform css code

First, you use id to specify the transform functions:

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

Then, you try to override it by specifying a class:

.active_score {
    transform: scale(2);
}

which wouldn't work because of the CSS specificity problem.

You can solve this by making it more specific:

#spelling_game_score_box_score.active_score {
    transform: scale(2);
}

But then we come to the second problem where transform: scale(2); overrides the original transformation.

To solve this you can use both rotate and scale in the same transformation.

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

Here is a working fiddle: https://jsfiddle.net/uopfapd3/

answered Mar 21, 2016 at 5:50

AKS

20k3 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parth Patel Over a year ago

I need to apply .active_score on multiple location so rotate effect will be applied on every dom where i apply .active_score class. So there will be another issue i will face.

AKS Over a year ago

Then I would suggest that instead of using an id earlier, you use another class. e.g. .game_score_box_score

Collectives™ on Stack Overflow

Facing issue while applying css transform properties to DOM object using multiple css classes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related