interrupted-compound-transform.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Interrupted Transitions on Transform Test</title>
  7. <style type="text/css" media="screen">
  8. #container {
  9. width: 400px;
  10. height: 400px;
  11. margin: 20px;
  12. border: 1px solid black;
  13. perspective: 800px;
  14. }
  15. #tester {
  16. width: 300px;
  17. height: 300px;
  18. margin: 50px;
  19. background-color: blue;
  20. transition: transform 3s linear;
  21. transform: rotateX(65deg) translateZ(75px) rotateZ(0deg);
  22. transform-style: preserve-3d;
  23. }
  24. #pos1 {
  25. position:absolute;
  26. width: 300px;
  27. height: 300px;
  28. margin: 50px;
  29. border: 2px solid #F00;
  30. transform: rotateX(65deg) translateZ(75px) rotateZ(118deg);
  31. transform-style: preserve-3d;
  32. }
  33. #pos2 {
  34. position:absolute;
  35. width: 300px;
  36. height: 300px;
  37. margin: 50px;
  38. border: 2px solid #0F0;
  39. transform: rotateX(65deg) translateZ(75px) rotateZ(80deg);
  40. transform-style: preserve-3d;
  41. }
  42. </style>
  43. <script type="text/javascript" charset="utf-8">
  44. function setAngle(index)
  45. {
  46. var tester = document.getElementById('tester');
  47. tester.style.transform = "rotateX(65deg) translateZ(75px) rotateZ(" + index + "deg)";
  48. }
  49. function runTest()
  50. {
  51. window.setTimeout(function() {
  52. setAngle(240);
  53. }, 0);
  54. window.setTimeout(function() {
  55. setAngle(80);
  56. }, 1500);
  57. }
  58. window.addEventListener('load', runTest, false);
  59. </script>
  60. </head>
  61. <body>
  62. In this test you should see a blue diamond spinning in the clockwise direction. After 1.5 seconds it should stop
  63. close to the red outlne and then spin counterclockwise. After 3 more seconds it should stop close to the
  64. position of the green outline.
  65. (see: <a href="https://bugs.webkit.org/show_bug.cgi?id=26162">https://bugs.webkit.org/show_bug.cgi?id=26162)</a>
  66. <div id="container">
  67. <div id="pos1">
  68. </div>
  69. <div id="pos2">
  70. </div>
  71. <div id="tester">
  72. </div>
  73. </div>
  74. </body>
  75. </html>