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

Question

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

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

Answer 1

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

似乎无法告诉转换为 'inherit' 某些属性。解决这个问题的一种方法是将元素放入容器中，并赋予其我们希望的变换属性 'inherited'.

所以在给定的例子中：

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

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

Setting transition value for specific transform property

css-transitions

css-transforms

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

Setting transition value for specific transform property

css-transitions

css-transforms

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