将变换附加到已存在的变换

Question

我已经定义了一个使用transform的动画。

我想使用javascript将其他transform附加到已有的{。}}。

不幸的是，当我尝试附加额外的transform时，我的新内容会被忽略。

var brick = document.getElementById('brick');

brick.style.transform = "rotateX(50deg)";

@keyframes red {
  from {transform: translateY(10px);}
  to {transform: translateY(0px);}
}

#brick {
  animation: 1s red infinite;
  background: red;
  height: 100px;
  width: 100px;
}

<div id="brick">
</div>