Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added slides about css 3D and webGl.

fixed figures/canvas.html, chrome seems to be throttling postMessage (unfortunately)
  • Loading branch information...
commit 7e9d11457d22341b85a3b7046804ee642d3233ca 1 parent 0cb81d1
Marius Gundersen authored

Showing 3 changed files with 105 additions and 3 deletions. Show diff stats Hide diff stats

  1. +1 1  figures/canvas.html
  2. +66 0 figures/css3D.html
  3. +38 2 index.html
2  figures/canvas.html
@@ -9,7 +9,7 @@
9 9 </style>
10 10 <canvas width="320" height="240" id="c" style="float:left"></canvas>
11 11 <script>
12   - var fps=5000, count=0, MAX=10000;
  12 + var fps=150, count=0, MAX=300;
13 13 var now = +new Date();
14 14 var canvas = document.getElementById("c");
15 15 var ctx = canvas.getContext("2d");
66 figures/css3D.html
... ... @@ -0,0 +1,66 @@
  1 +<!doctype html>
  2 +<body>
  3 +<style>
  4 +*{
  5 + margin:0;
  6 + padding:0
  7 + display: block;
  8 +}
  9 +@-webkit-keyframes wobble{
  10 + from{
  11 + -webkit-transform: rotateY(0deg);
  12 + }
  13 + to{
  14 + -webkit-transform: rotateY(360deg);
  15 + }
  16 +}
  17 +
  18 +body{
  19 + padding: 120px;
  20 + -webkit-perspective: 600px;
  21 + -webkit-perspective-origin: 50% 50%;
  22 + overflow: hidden;
  23 +}
  24 +div{
  25 + position: relative;
  26 + text-align: center;
  27 + display: block;
  28 + height: 126px;
  29 + -webkit-transform-style: preserve-3d;
  30 + -webkit-animation: wobble 9s infinite linear;
  31 + -webkit-transform-origin: 50% 0;
  32 +}
  33 +div *{
  34 + position: absolute;
  35 + width: 126px;
  36 + height: 126px;
  37 + display: inline-block;
  38 +}
  39 +img{
  40 + -webkit-transform: translateZ(63px);
  41 + border: 1px solid black;
  42 +}
  43 +button{
  44 + padding: 0;
  45 + -webkit-transform: translateX(63px) rotateY(90deg);
  46 +}
  47 +p{
  48 + background: white;
  49 + -webkit-transform: translateZ(-63px) rotateY(180deg);
  50 + border: 1px solid black;
  51 +}
  52 +span{
  53 + background: rgba(128,168,255,0.6);
  54 + -webkit-transform: translateX(-63px) rotateY(270deg);
  55 + border: 1px solid black;
  56 +}
  57 +</style>
  58 +<body>
  59 + <div>
  60 + <img src="bird.jpg" />
  61 + <button></button>
  62 + <p>Tekst som snurrer!</p>
  63 + <span></span>
  64 + </div>
  65 +</body>
  66 +</html>
40 index.html
@@ -945,6 +945,38 @@
945 945 <li><a href="http://projects.mariusgundersen.net/DoomHTML">Multiplayer Wolfenstein</a>
946 946 </ul>
947 947 </article>
  948 +
  949 + <article>
  950 + <h3>Other possibilites?</h3>
  951 + <ul>
  952 + <li>CSS3 3D Transform
  953 + <li>WebGL
  954 + </ul>
  955 + </article>
  956 +
  957 + <article>
  958 + <h3>CSS3 3D Transform</h3>
  959 + <pre>
  960 +perspective: 600px;
  961 +transform: rotateY(0.25turn) translateZ(100px);
  962 + </pre>
  963 + </article>
  964 +
  965 + <article class='nobackground'>
  966 + <iframe src='figures/css3D.html'></iframe>
  967 + </article>
  968 +
  969 + <article>
  970 + <h3>WebGl</h3>
  971 + <ul>
  972 + <li>OpenGL access to graphics card
  973 + <li>&lt;canvas&gt; getContext('webgl-experimental')
  974 + </ul>
  975 + </article>
  976 +
  977 + <article class='nobackground'>
  978 + <iframe src='http://localhost/mrdoob-three.js-40649e0/examples/webgl_materials_cars.html'></iframe>
  979 + </article>
948 980
949 981 <article>
950 982 <h3>Lessons Learned</h3>
@@ -955,12 +987,16 @@
955 987 <li>Don't draw what you don't see
956 988 <li>Draw small images
957 989 <li>ctx.clip() is your friend
958   - </ul>
  990 + </ul>
  991 + <li>WebGL and CSS 3D are experimental and cool
959 992 </ul>
960 993 </article>
961 994
962 995 <article>
963   - <h2>Thank You</h2>
  996 + <h1>Thank You</h1>
  997 + <p>MariusGundersen.net<br>
  998 + @gundersenMarius
  999 + </p>
964 1000 </article>
965 1001
966 1002

0 comments on commit 7e9d114

Please sign in to comment.
Something went wrong with that request. Please try again.