4 <style type="text/css">
11 background-color: green;
12 -webkit-border-radius: 10px;
13 -webkit-transition: -webkit-transform 1s;
17 font-family: 'Georgia', serif;
31 font-family: 'Verdana', serif;
36 <script type="text/javascript">
37 const initialValues = [
38 "translate3d(100px, 100px, 0px)",
39 "rotate3d(0, 1, 0, 0deg)",
42 "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
46 const targetValues = [
47 "translate3d(250px, 250px, 0px)",
48 "rotate3d(0, 1, 0, 30deg)",
51 "matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
56 var iterations = Math.pow(2, initialValues.length);
59 // For the buffon needle experiment below.
64 function triggerTransition()
67 var elem = document.getElementById("animatable");
69 for (var j = 0; j < initialValues.length; ++j) {
73 var values = initialValues;
74 if (Math.floor(i / Math.pow(2, j)) % 2 == 1)
75 values = targetValues;
80 elem.style.webkitTransform = style;
83 document.getElementById("from").innerHTML = "From:<br> " + oldStyle;
84 document.getElementById("to").innerHTML = "To:<br> " + style;
85 document.getElementById("estimate").innerHTML = "Buffon estimate of pi after " + trials.toString() + " needle drops:<br>" + estimate.toString();
90 setTimeout(triggerTransition, 1000);
95 for (var step = 0; step < 100000; ++step) {
96 var x = 2.0 * Math.random();
97 x = Math.min(x, 2.0 - x);
99 if (Math.cos(Math.PI * Math.random() * 0.5) > x)
105 estimate = 2 * trials / hits;
109 setTimeout(buffonStep, 0);
112 function startExperiment()
118 window.addEventListener('load', startExperiment, false);
122 <div id="animatable"><p id="poster">Hi!</p></div>
124 <p id="from">From:</p>
126 <p id="estimate">Estimate:</p>