在-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。