third_party/WebKit/LayoutTests/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 = '90deg 1 0 0';
rotateAdd.animate([
  {rotate: '-180deg 0 1 0', composite: 'add'},
  {rotate: '90deg 0 0 1'},
], timing);
rotateReplace.animate([
  {rotate: '180deg 0 -0.707107 -0.707107'},
  {rotate: '90deg 0 0 1'},
], timing);
transform.animate([
  {transform: 'rotate3d(1, 0, 0, 90deg) rotate3d(0, 1, 0, -180deg)'},
  {transform: 'rotate3d(0, 0, 1, 90deg)'},
], timing);
</script>