设置特定转换属性的过渡值

问题描述

我想知道是否可以为特定的转换属性设置过渡值。类似于示例“转换比例”。我想在元素上以0.2s的过渡缩放元素，但是旋转保持固定。我知道可以用动画来完成，但是对此一无所获。

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

解决方法

问题在于如何在伪元素中转换元素时保持元素的一种变换。

似乎没有办法告诉转换“继承”某些属性。解决这个问题的一种方法是将元素放入容器中，并赋予我们希望被“继承”的转换属性。

因此在给定的示例中：

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