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);
}

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

我怎样才能只为-webkit-transform的rotateX函数设置动画？

Answer 1

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