将CSS3过渡应用于一些变换（translate3d），但不适用于其他变换（旋转）。

Question

将CSS3过渡应用于一些变换（translate3d），但不适用于其他变换（旋转）。

csstransformtransition

3

我想定义一个类，只将CSS3转换应用于translate3d变换，而不是任何其他变换（旋转、平移等）。是否可能？如果可能，语法是什么？类似这样的东西：

```css .translate-only { /* styles applied only to translate3d transform */ } ```

```html

Contents

```

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

- esdot

1

我认为这是不可能的，你可以给该元素添加一个容器，然后分离动画，但这有点繁琐。 - Jonas Grumann

1

我不这么认为，但我很乐意被证明是错误的。我认为通过动画关键帧应用特定的转换可能是一个不错的选择。 - Mister Epic

1

最终我使用了一个容器元素（div），将转换应用于其transform属性和一个没有转换的子元素（img），并在子元素上设置了旋转。感谢大家的帮助！ - esdot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mircea · Accepted Answer

您不能仅使用translate3d进行过渡，但您可以保持其余部分不变：

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

并且在悬停时

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

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