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

2025-10-23 20:35:02

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

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

2、打开记事本，编写html代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js+css3实现立体式图片旋转特效</title>

<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>

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,

).init();

};

});

</script>

</head>

<body>

</body>