| <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> |