transform-origin-vs-functions.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/helpers.js"></script>
<style>
  #a {
    height: 600px;
    left: 0px;
    perspective: 800;
    position: absolute;
    top: 0px;
    width: 800px;
  }
  #b1 {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: b1;
    animation-timing-function: linear;
    background-color: #282;
    height: 200px;
    left: 300px;
    position: absolute;
    top: 80px;
    transform-origin: center center 200px;
    width: 200px;
  }
  @keyframes b1 {
    from { transform: rotateY(0deg); }
    5%   { transform: rotateY(90deg); }
    20%  { transform: rotateY(90deg); }
    50%  { transform: rotateY(180deg); }
    75%  { transform: rotateY(270deg); }
    to   { transform: rotateY(360deg); }
  }
  #b2 {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: b2;
    animation-timing-function: linear;
    background-color: #282;
    height: 200px;
    left: 300px;
    position: absolute;
    top: 320px;
    width: 200px;
  }
  @keyframes b2 {
    from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
    5%   { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
    20%  { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
    50%  { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
    75%  { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
    to   { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
  }
</style>
<div id="a">
  <div id="b1"> </div>
  <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
    <div id="b2"> </div>
  </div>
</div>
<script>
  'use strict';

  test(function() {
    const epsilon = 0.0001;

    b1.style.animationDelay = '-0.25s';
    const expectedB1 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1)';
    assert_true(matricesApproxEqual(getComputedStyle(b1).transform, expectedB1, epsilon), 'b1');

    b2.style.animationDelay = '-0.25s';
    const expectedB2 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -200, 0, 200, 1)';
    assert_true(matricesApproxEqual(getComputedStyle(b2).transform, expectedB2, epsilon), 'b2');
  }, "3D transform functions compose");
</script>
chromium/third_party/blink/web_tests/animations/3d/transform-origin-vs-functions.html
