Fixed some size issues caused by how we now compute the WebGL canvas size
authorcmarrin@apple.com <cmarrin@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Mar 2010 19:21:42 +0000 (19:21 +0000)
committercmarrin@apple.com <cmarrin@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Mar 2010 19:21:42 +0000 (19:21 +0000)
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@56801 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebKitSite/blog-files/webgl/WebGL+CSS.html

index 23e20a5..1a9ddf5 100644 (file)
             background-color:grey;
         }
         #container {
-            -webkit-transform: perspective(800) rotateY(0) rotateZ(0) translateZ(0);
+            -webkit-transform: perspective(800) translateX(0) rotateY(0) rotateZ(0) translateZ(0);
             -webkit-transition: -webkit-transform 2s;
         }
         #container.tilted {
-            -webkit-transform: perspective(800) rotateY(60deg) rotateZ(320deg) translateZ(-200px);
+            -webkit-transform: perspective(800) translateX(200px) rotateY(60deg) rotateZ(320deg) translateZ(-250px);
         }
         canvas {
-            width:90%;
-            height:90%;
+            width:800px;
+            height:600px;
         }
         #bg {
             border:4px solid #242;
             position:absolute;
-            width:90%;
-            height:90%;
+            width:800px;
+            height:600px;
         }
         #rocker {
             position:absolute;
-            top:300px;
+            top:200px;
             left:300px;
             font-size:3em;
             text-shadow: white 2px 2px 4px;
         }
         
         @-webkit-keyframes rock {
-            0% { -webkit-transform: translateX(-100px) rotate3d(0,0,1, -30deg) }
-            25% { -webkit-transform: translateX(-50px) rotate3d(0,0,1, 30deg) }
-            50% { -webkit-transform: translateX(0px) rotate3d(0,0,1, -30deg) }
+            0% { -webkit-transform: translateX(-250px) rotate3d(0,0,1, -30deg) }
+            25% { -webkit-transform: translateX(-150px) rotate3d(0,0,1, 30deg) }
+            50% { -webkit-transform: translateX(-50px) rotate3d(0,0,1, -30deg) }
             75% { -webkit-transform: translateX(50px) rotate3d(0,0,1, 30deg) }
-            100% { -webkit-transform: translateX(100px) rotate3d(0,0,1, -30deg) }
+            100% { -webkit-transform: translateX(150px) rotate3d(0,0,1, -30deg) }
         }
         
         #framerate {
     <body onload="start()">
         <div id="container">
             <img id="bg" src="resources/BambooBridge.jpg" />
-            <canvas id="example">
+            <canvas id="example" width="800px" height="600px">
                 There is supposed to be an example drawing here, but it's not important.
             </canvas>
         </div>