js+css3实现立体式图片旋转特效【百科全说】

js+css3可以是一个网页变得非常炫酷，下面我简单讲解下‘js+css3实现立体式图片旋转特效’如何实现。

操作方法

01

首先是准备工作，找到几张图片，在开发时使用。
02

打开记事本，编写html代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js+css3实现立体式图片旋转特效</title> <meta name="Keywords" content="网友Adam‘分享用Aui-core实现的图片3D旋转JS特效,Jquery插件,Jquery原创,Jquery资源,Jquery特效,div+css,JquerySchool" /> <style> *{margin:0;padding:0;list-style:none} body{overflow:hidden; background:#000;} #stage{width:200px;height:300px;position:relative;margin:0 auto;margin-top:150px;background:null;-webkit-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-moz-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-ms-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-o-transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);transform:rotateX(-10deg) rotateY(0deg) perspective(2000px);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d} #shadow{position:absolute;left:50%;top:50%;width:1200px;height:1200px;margin-left:-600px;margin-top:-600px;background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-moz-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-ms-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:-o-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));background:radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));-webkit-transform:translateY(200px) rotateX(90deg);-moz-transform:translateY(200px) rotateX(90deg);-ms-transform:translateY(200px) rotateX(90deg);-o-transform:translateY(200px) rotateX(90deg);transform:translateY(200px) rotateX(90deg)} #stage dd{height:300px;width:200px;position:absolute;left:0;top:0;border:1px solid #666;-webkit-transition:500ms all ease;-moz-transition:500ms all ease;-ms-transition:500ms all ease;-o-transition:500ms all ease;transition:500ms all ease} .over{position:absolute;left:0;top:320px;width:200px;height:300px;overflow:hidden;-webkit-transition:2s all ease;-moz-transition:2s all ease;-ms-transition:2s all ease;-o-transition:2s all ease;transition:2s all ease;-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1);background-size:100% 100%;opacity:0} </style> <script src="js/Aui-core-1.42-min.js"></script> <script> var Effect = function( a, w, h, s, p, x, y ) { var _3Deffect = function( array , width, height, stage, per, x, y ) { this.oDoc = document; this.stage = stage; this.width = width; this.height = height; this.path = array; this.domStr = "<dt id=\"shadow\"></dt>"; this.perspective = per, this.rotateX = x, this.rotateY = y, this.speedX=0, this.speedY=0; } _3Deffect.prototype = { transform : function( elem, value, key ) { key = key || "transform"; [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre ) { elem.style[ pre + key ] = value; }); return elem; }, piece : function( value, key ) { var str = ""; key = key || "transform"; [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre ) { str += ( key + ":" + pre + value ); return false; }); return str; }, addEvent : function ( obj, sEvent, fn ) { if( obj.attachEvent ) { obj.attachEvent( "on" + sEvent, fn ); } else { obj.addEventListener( sEvent, fn, false ); }; }, onMouseWheel : function( e ) { var _o = this; if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 ) { if( _o.perspective < 4000 ) { _o.perspective += 150; }; } else { if( _o.perspective > 350 ) { _o.perspective -= 150; }; }; _o.transform( _o.stage[0], "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" ); if( e.preventDefault ) { e.preventDefault(); }; return false; }, startMove : function startMove( obj ) { var _o = this; obj.timer = obj.timer || null; clearInterval( obj.timer ); obj.timer = setInterval (function () { _o.rotateX -= _o.speedY; _o.rotateY += _o.speedX; _o.speedY *= 0.93; _o.speedX *= 0.93; if( Math.abs( _o.speedX ) < 0.1 && Math.abs( _o.speedY ) < 0.1 ) { _o.stopMove( obj.timer ); }; _o.transform( obj, "perspective(" + _o.perspective + "px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" ); }, 30); }, stopMove : function( t ) { clearInterval( t ); }, init : function() { var _o = this; Aui.each( _o.path, function( i ) { var shadow = _o.piece( "linear-gradient(top, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0)), url(" + this + ");", "background-image" ), shadow = "<div class=\"over\" style=\"" + shadow + "\"></div>"; _o.domStr += "<dd style=\"background-image:url("+ this +");\">" + shadow + "</dd>"; }); Aui( _o.stage ).html( _o.domStr ); var _oList = Aui( "dd", _o.stage ), _sLen = _o.path.length, _deg = 360/_sLen, _tranZ = ( _o.width/2 + 40 ) / Math.tan( ( 360/_sLen/2 ) * Math.PI / 180 ), _i = _sLen; while( _i > 0 ) { ( function( d, len, _oList, _o ) { setTimeout( function() { var idx = len - d, oThis = _oList[ idx ] oThis.children[0].style.opacity = 0.2; _o.transform( oThis, "rotateY(" + ( idx*_deg ) +"deg) translateZ(" + _tranZ + "px)" ); }, d * 200 ); })( _i-- , _sLen, _oList, _o ); }; var wheel = function( e ) { _o.onMouseWheel.call( _o, e || window.event ); }; _o.addEvent( _o.oDoc, "mousewheel", wheel ); _o.addEvent( _o.oDoc, "DOMMouseScroll", wheel ); var AuiDoc = Aui( _o.oDoc ); AuiDoc.mousedown( function( e ) { var moveX = e.clientX, moveY = e.clientY; var startX = _o.rotateX; var startY = _o.rotateY; var lastX = moveX; var lastY = moveY; _o.speedX = _o.speedY = 0; AuiDoc.mousemove( function( e ) { var x = e.screenX, y = e.screenY; _o.rotateY = startY + ( e.clientX - moveX )/10; _o.rotateX = startX - ( e.clientY - moveY )/10; _o.transform( _o.stage[0], "perspective("+ _o.perspective +"px) rotateX("+ _o.rotateX +"deg) rotateY(" + _o.rotateY +"deg)" ); _o.speedX =( e.clientX - lastX )/5; _o.speedY =( e.clientY - lastY )/5; lastX = e.clientX; lastY = e.clientY; }); AuiDoc.mouseup( function() { this.onmousemove = null; this.onmouseup = null; _o.startMove( _o.stage[0] ); }); _o.stopMove( _o.stage[0].timer ); return false; } ); return _o; } }; return new _3Deffect( a, w, h, s, p, x, y ); }; Aui.ready( function() { if( /ie/g.test( Aui.browser() ) ) { Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！") .setStyle( { "color" : "#fff", "text-align" : "center", "font-size" : "50px", "font-weight" : "bolder", "line-height" : "500px" }); } else { Effect( [ "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/01.jpg", "images/02.jpg", "images/03.jpg" ], 200, 300, Aui.byID("#stage"), 2000, -10, 0 ).init(); }; }); </script> </head> <body> <div id="stage"></div> </body> </html>
03

下载对应的js文件
04

将js文件导入。
05

将对应的图片加入。
06

然后，即可看到网页效果。

js+css3实现立体式图片旋转特效

操作方法

相关推荐