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