CSS3转换：rotate（）和rotateY（）不一起工作

我有一个简单的div，我想先旋转35度，然后让它绕y轴旋转

但是通过使用

变换：旋转（-35度）旋转（180度），我真正得到的是这样的：


y轴随div旋转，使我的尝试失败

问题是，在旋转元素之后，是否有一种方法来重置y轴的角度（可能使用附加的父元素和<代码>转换原点< /代码>？）以获得我想要的结果？
是的，尽管它需要使用容器div。考虑在div中放置div：

<div class="outer">
  <div class="inner"></div>
</div>

以及对容器div的Y变换，其Y轴未通过Z旋转进行变换

.outer {
   transformY(Ndeg);
}

为什么这是必要的是复杂的，可能超出了这个答案的范围，但只需说，3d编程和绘图的历史引导程序员期待您在这里看到的行为。。。这样，多个连续变换可以获得可预测的统一结果。如果浏览器对于DOM元素不是直线的，或者如果您使用SVG绘制了romboid形状（风筝等），您可以根据需要旋转它，使变换方向从一个角到另一个角。
变换的顺序与直观的顺序相反。解释为什么会有点太长，但请尝试以下方法：

.test {
    position: absolute;
    width: 100px;
    height: 200px;
    left: 50px;
    top: 100px;
    background-color: lightblue;
    -webkit-animation: rotate 3s infinite linear;
    animation: rotate 3s infinite linear;
}

@-webkit-keyframes  rotate {
    0% { -webkit-transform: rotateY(0deg) rotate(-35deg)}
  100% { -webkit-transform: rotateY(360deg) rotate(-35deg)}
}

@keyframes  rotate {
    0% { transform: rotateY(0deg) rotate(-35deg)}
  100% { transform: rotateY(360deg) rotate(-35deg)}
}

我旋转-35度，然后旋转，从0到360设置动画（从右到左读取变换）

更新：答案非常适合我！这是一个工作演示：非常酷。Good job.update2:@vals的一个新答案表明，不需要额外的容器div就可以完成这项工作，只需切换两个转换的顺序。请检查一下。
.test {
    position: absolute;
    width: 100px;
    height: 200px;
    left: 50px;
    top: 100px;
    background-color: lightblue;
    -webkit-animation: rotate 3s infinite linear;
    animation: rotate 3s infinite linear;
}

@-webkit-keyframes  rotate {
    0% { -webkit-transform: rotateY(0deg) rotate(-35deg)}
  100% { -webkit-transform: rotateY(360deg) rotate(-35deg)}
}

@keyframes  rotate {
    0% { transform: rotateY(0deg) rotate(-35deg)}
  100% { transform: rotateY(360deg) rotate(-35deg)}
}