JS特效第128弹：超流畅漂亮的图片3D旋转滚动JS特效代码

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375688
超流畅漂亮的图片3D旋转滚动JS特效代码，支持360度图片旋转滚动展示，非常适合产品图片滚动切换展示以及各种产品图片的场景应用，可上下图片倒置切换，滚动非常流畅，先来看看效果：
一部分关键的代码如下：
<!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>超流畅漂亮的图片3D旋转滚动JS特效代码 - JS代码网</title>
<meta name="Keywords" content="超级漂亮相册图片3D滚动旋转JS代码" />
<style>
* { margin:0; padding:0; list-style:none; }

body { background:black; overflow:hidden;}

#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="Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
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( 
			[ "01.jpg", "02.jpg", "03.jpg", "01.jpg", "02.jpg", "03.jpg", "01.jpg", "02.jpg", "03.jpg" ],
			200,
			300,
			Aui.byID("#stage"),
			2000,
			-10,
			0
		 ).init();
	};
});
</script>
</head>

<body>

<dl id="stage"></dl>

</body>
</html>
<div style="display:none">
	<script type="text/javascript">
	var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
	document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6f798e51a1cd93937ee8293eece39b1a' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5718743'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s9.cnzz.com/stat.php%3Fid%3D5718743%26show%3Dpic2' type='text/javascript'%3E%3C/script%3E"));</script>
	</div>
全部代码：超流畅漂亮的图片3D旋转滚动JS特效代码