将 CSS3 过渡应用于某些变换 (translate3d) 但不应用于其他变换 (rotate)答案

【问题标题】：Apply CSS3 Transition To Some Transforms (translate3d) but Not Others (rotate)将 CSS3 过渡应用于某些变换 (translate3d) 但不应用于其他变换 (rotate)
【发布时间】：2014-04-25 15:10:25
【问题描述】：

我想定义一个类，它的 CSS3 过渡仅适用于 translate3d 变换，而不适用于任何其他变换（旋转、翻译等）。这可能吗？如果是这样，语法是什么？像这样的：

.animatedMarker {
    transition: transform:translate3d 1s linear; 
    /* transition is only applied to translate3d transformation, so rotate, translate, etc. won't be animated */
}

【问题讨论】：

我不认为这是可能的，你可以给那个元素添加一个容器然后分离动画，但这有点hacky
我不这么认为，但我很想被证明是不正确的。我认为通过动画关键帧应用特定变换可能是一个不错的选择。
我最终使用了一个容器元素 (div)，将过渡应用到它的 transform 属性和一个没有过渡的子元素 (img)，并在子元素上设置了旋转。谢谢你们的帮助！

标签： css transform transition

【解决方案1】：

您不能只转换 translate3d，但您可以保持其余部分不变：

transform: translate3d(0, 0, 0) skew(45deg) rotate(23deg);

悬停时

transform: translate3d(100px, 0, 0) skew(45deg) rotate(23deg);

http://jsfiddle.net/yeuxQ/1/

【讨论】：

+1 很多重复，不幸的是，但我当然没有看到任何其他方法可以用过渡来做到这一点。
感谢 cmets。不幸的是，我需要同时更改旋转和 translate3d。我正在考虑使用一个包含 div 来设置 translate3d 的转换和一个子 img 来指定没有转换的旋转。