HTML5+CSS3旋转风车
JS
// JavaScript Document $(document).ready(function(){ setInterval('zb()',100); }) var s=0; var transformString = Modernizr.prefixed('transform');//引用插件,自动添加前缀 function zb(){ var mi=$('#befor > img'); s=Number(s)+10; mi.css(transformString, 'rotateX(0deg) rotateY(0deg) rotateZ('+s+'deg) translate3d(0px, 0px, 0px) scale3d(1,1,1)'); } $(document).bind('mousedown',function(event){ console.log(event.pageX+","+event.pageY); })
HTML
<div class="container gbox"> <h3>windmill</h3> <div class="windmill"> <article> <section id="befor"> <img src="images/3.png" style="transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale3d(1,1,1);transform-origin:65px 67px; position:absolute; transform-style:preserve-3d"> </section> </article> </div> </div>
CSS
@charset "utf-8"; /* CSS Document */ /* - 1.0. - CSS RESET ---------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block } audio, canvas, video { display:inline-block; *display:inline;*zoom:1} audio:not([controls]) {display:none} [hidden] {display:none} * { outline:0!important; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-duration:.3s; -moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s} html { overflow-x:hidden; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100% } h3{font-size:30px; font-family:Arial} .clear{clear:both} /*windmill*/ .container{width:960px; height:auto; margin:0 auto; transform-style:preserve-3d} .gbox h3{font-size:20px; text-align:center} .windmill{margin-top:30px; transform-style:preserve-3d; text-align:center}