Setting transition value for specific transform property

Question

I am wondering if it is possible to set transition value for specific transform property. Like in the example "transform-scale". I want to scale element on hover with transition of 0.2s, but rotation to stay fixed. I know it can be done with animation but found nothing about this.

    #element {
           transform: rotate(90deg)
           transition: "transform-scale" 0.2s
    }
    #element:hover {
           transform: scale(1.1)
    }

Answer 1

The problem is how to maintain one transform of an element while transforming another in a pseudo element.

There appears to be no way of telling transform to 'inherit' some properties. A way of getting round this is to put the element in a container and give that the transform properties that we wish to be 'inherited'.

So in the given example:

#container {
           position: relative;
           top:100px; /* just so we can see the div when rotated */
           width: 100px;
           height: 20px;
           background-color: cyan;
           transform: rotate(90deg);
}
#element {  
           width: 100px; /* dimensions put in just so we can see the div */
           height: 20px;
           background-color: cyan;
           transition: scale 10s;
    }
#element:hover {
           transform: scale(1.1);
    }

<div id="container">
  <div id="element"></div>
</div>