<style>
.target {
  position: absolute;
  font-size: 100px;
  width: 100px;
  height: 100px;
  border: solid;
}
#rotateAdd { color: red; }
#rotateReplace { color: red; }
#transform { color: green; }
</style>
There should be no red visible.
<div class="target" id="rotateAdd">F</div>
<div class="target" id="rotateReplace">F</div>
<div class="target" id="transform">F</div>
<script>
var timing = {fill: 'forwards', iterations: 0.75};
rotateAdd.style.rotate = '1 0 0 90deg';
rotateAdd.animate([
  {rotate: '0 1 0 -180deg', composite: 'add'},
  {rotate: '0 0 1 90deg'},
], timing);
rotateReplace.animate([
  {rotate: '0 -0.707107 -0.707107 180deg'},
  {rotate: '0 0 1 90deg'},
], timing);
transform.animate([
  {transform: 'rotate3d(1, 0, 0, 90deg) rotate3d(0, 1, 0, -180deg)'},
  {transform: 'rotate3d(0, 0, 1, 90deg)'},
], timing);
</script>