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}

 

转载于:https://www.cnblogs.com/dean5277/archive/2012/09/13/2683718.html