首页 >游戏数码 >互联网 >

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

次浏览 | 2022-12-20 18:25:03 更新

来源：互联网

最佳经验

本文由作者推荐

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文件要正确导入，才能正常显示

js+css3实现立体式图片旋转特效相关的文章

光影魔术手做一寸照片方法教程

比如遇到一些面试啊还有别的一些公司需要自己一些规整的彩色照片，但是自己又不会操作，一般都去照相馆找照相师傅进行制作，今天我就教大家用光影魔术手做一寸照片方法教程，以后自己也可以做彩色照片。打开自己下载到电脑上面的光影魔术手软件，然后进入软件主页面，在主页面点击浏览图片选项。

如何举报直播平台

End方法若是举报某一直播平台内的某位主播，那么直接在该主播所在直播间举报即可，以虎牙直播为例，点击界面上方。通过写邮件的方式对直播平台违法行为进行举报。

整蛊代码关不掉的弹窗

整蛊代码关不掉的弹窗新建一个txt文本文档，如图：把以下文字复制进去，如图：domsgbox("你要说的话")loop文件--另存为--保存路径为桌面--文件名为**.vbs然后就好啦，如图：点击打开就行了，如图：这个是无限弹窗的，怎么都关不掉的，要想关掉的话就按Ctrl+A

狱血魔神异界套

装备出处：巨剑，鹰犬Kboss图太刀，蠕动Kboss图巨棒，蠕动Kboss图戒指，商店出售项链，蠕动K图手镯，鹰犬Kboss图绑腿，商店出售护肩，蠕动K图短靴，蠕动K图属性如下：厄运之忆套，期套装中用的人数最多，血剑瞬间爆炸，厄运刷异界飞一般的感觉。

淘宝图片尺寸怎么改多大合适

淘宝网卖家在为宝贝上传图片时经常会发现上传宝贝图片后刷新页面，图片过大导致只显示图片一部分，影响宝贝页面的美观度和整体性。当然像素也可以自己去自定义为其他数值，多次尝试后可找到适合自己的像素数值End

怎麽安装水星无线网卡驱动

如果我们没拉网线或是拉了却想用手机连上电脑的网络怎么办。废话就不说了，接下来分享一个水星无线网卡的驱动安装小方法。，首先在网上下载一个水星无线网卡的驱动或是拿你的配带的光盘也行。，下面，电脑可能会弹出有风险什么的直接点击继续安装就可以了。

qq家园电脑登陆|3gqq家园电脑登陆

gqq家园电脑登陆是指以www的形式登入wap。下面为大家介绍如何gqq家园电脑登陆。gqq家园电脑登陆：搜狗搜索gqq家园电脑登陆随便选取一个,这里选择第二个做示范进入网址后可直接输入gqq家园地址（如图）点击开始访问点击家园如此，已经进入到gqq家园另外firefox或者opera浏览器都可以直接浏览手机网页End