animation - 影响 -webkit-animation 中的 -webkit-transform 函数而不影响应用于目标元素的其他 -webkit-transform 函数？

Question

我想为元素的 -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);
}

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

如何只对 -webkit-transform 的 rotateX 函数进行动画处理？

Answer 1

完成此操作的最简单方法是使用应用了基础变换 (-45/45) 的包装器 div，并将动画类应用到包装的 div。