为特定的变换属性设置过渡值

【问题标题】：Setting transition value for specific transform property为特定的变换属性设置过渡值
【发布时间】：2021-02-15 01:33:52
【问题描述】：

我想知道是否可以为特定的转换属性设置转换值。就像在示例“变换比例”中一样。我想在悬停时缩放元素，过渡为 0.2 秒，但旋转保持固定。我知道它可以用动画来完成，但对此一无所获。

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

【问题讨论】：

标签： css-transitions css-transforms

【解决方案1】：

问题是如何保持一个元素的一个变换，同时在一个伪元素中变换另一个。

似乎没有办法告诉 transform '继承'某些属性。解决此问题的一种方法是将元素放入容器中，并为其提供我们希望“继承”的转换属性。

所以在给定的例子中：

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

【讨论】：