How can I apply multiple transform declarations to one element?

You can't do this using just CSS, but if you don't mind using some jQuery you can attach this effect:

var $elem = $('.cssDropPinImage');

$({deg: 0}).animate({deg: 360}, {
  duration: 600,
  step: function(now) {
    var scale = (2 * now / 360);
    $elem.css({
      transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
    });
  }
});

body {
  padding: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://via.placeholder.com/40" class="cssDropPinImage">

I'm guessing this does not work because the classes override each other's transform property?

Correct. This is an unfortunate limitation as a side-effect of how the cascade works.

You will have to specify both functions in a single transform declaration. You could simply chain both class selectors together instead of creating a new class for a combined transform:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

... but as you can see, the issue lies in the transform property rather than in the selector.

This is expected to be rectified in Transforms level 2, where each transform has been promoted to its own property, which would allow you to combine transforms simply by declaring them separately as you would any other combination of CSS properties. This means you would be able to simply do this:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... and take advantage of the cascade rather than be hindered by it. No need for specialized class names or combined CSS rules.

Using CSS variables you can have this separation. The idea is to chain as many transformation as you want inside the element using CSS variables then later you update each variable individually:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1, ) /* we need a space as fallbak*/
    var(--t2, ) 
    var(--t3, );
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}

<div class="transitionease doublesize rotate "></div>

You can surely combine multiple animation, but not by combining CSS classes. See the first answer here : combining multiple css animations into one overall animation

The first part tells you how to combine animation with CSS with some parameters (delay, duration) :

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

For sure, you firstly need to define your animations.