影响 -webkit-animation 中的 -webkit-transform 功能而不影响应用于目标元素的其他 -webkit-transform 功能？答案

【问题标题】：Affect a function of -webkit-transform in a -webkit-animation without affecting other -webkit-transform functions applied to the target element?影响 -webkit-animation 中的 -webkit-transform 功能而不影响应用于目标元素的其他 -webkit-transform 功能？
【发布时间】：2012-07-02 01:10:39
【问题描述】：

我想为元素的 -webkit-transform: rotateX() 设置动画，同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码：

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0); }
    to { -webkit-transform: rotateX(45deg); }
}

.target {
    -webkit-animation: anim .5s infinite alternate linear;
}

.target.one {
    -webkit-transform: rotate(45deg);
}

.target.two {
    -webkit-transform: rotate(-45deg);
}

在这种情况下，目标 1 和 2 开始正确旋转，但是当动画应用 -webkit-transform: rotateX() 时，它们的旋转会被覆盖

如何只为 -webkit-transform 的 rotateX 函数设置动画？

【问题讨论】：

标签： animation css webkit

【解决方案1】：

实现这一点的最简单方法是使用一个应用了基本变换 (-45/45) 的包装 div，并将动画类应用于包装的 div。

【讨论】：