third_party/blink/web_tests/animations/rotate-transform-equivalent.html

<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: 'matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1)'},
  {transform: 'matrix(0, 1, -1, 0, 0, 0)'},
], timing);
</script>