html
  <div class="wrapper">
    <button class="btn btn-primary bt7">움직여</button>
    <button class="btn btn-primary bt8">움직여</button>
    <button class="btn btn-primary bt9">움직여</button>
  </div>
  <div class="wrapper2"> 
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
  </div>

css
.box5 {width: 100px; height: 100px; background-color: crimson; position: absolute; top: 360px; transition: all 1s; left: 0;}
.box5.active {background-color: blue; width: 500px; height: 500px; left: 500px; transform: rotate(360deg);}

js
$('.bt9').click(function() {
  $('.box5').addClass('active');
});

여기서 .box5 띄어쓰고 .active하면 적용이 안되고 저렇게 딱 붙여야지만 먹더라고
근데 다른 css들은 .box5 .active 이런식으로 띄어쓰고 .쓰고 해도 css효과가 먹었는데 왜 안되는거야?