HTML5 Video 標籤初探 <!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <style> video{ /*-webkit-transform: rotate3d(3, 4, 3, 45deg) sca;*/ /*-webkit-transform: rotate3d(40, 1, 30, 45deg);*/ margin: auto auto; margin-top:200px; } </style> <script> // References: // http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/ // http://www.w3schools.com/css3/css3_3dtransforms.asp $(function(){ var index = 0; setInterval(function(){ if((index === 9) || (index === 27)) index+=1; if (index === 37) index = 1; $('video').css({ '-webkit-transform': 'rotateX('+(index*10)+'deg) rotateY('+(index*10)+'deg) rotateZ('+(index*10)+'deg)' }); index++; }, 100); }); </script> </head> <body> <video class="persistentNativePlayer nativeEmbedPlayerPid" poster="http://cdnbakmi.kaltura.com/p/243342/sp/24334200/thumbnail/entry_id/0_ntovmku5/version/100004/height/480" id="pid_kaltura-video" style="display: block; width: 480px; height: 271px; top: 0px; " kwidgetid="_243342" kuiconfid="5349042" kentryid="0_ntovmku5" src="http://cdnapi.kaltura.com/p/243342/sp/24334200/playManifest/entryId/0_ntovmku5/flavorIds/0_nvp2quz3,0_o0bikcqg/format/applehttp/protocol/http/a.m3u8?ks=NmRmYmMxOWIzNWUzMWE3Mzg1MmU5MzhjY2YzNjg2ZmQ3OGM2YTNkYXwyNDMzNDI7MjQzMzQyOzEzMzc5OTYwMTQ7MDsxMzM3OTA5NjE0LjIxNjY7MDt2aWV3Oio7Ow==&referrer=aHR0cDovL2h0bWw1dmlkZW8ub3JnLw==" autoplay="autoplay" loop="-1"></video> </body> </html> 可以在這邊看到範例：http://hechien.host22.com/html5video.html May 25th, 2012 css3, html5, notes, transform, video