Aui-core结合css实现可旋转三维图片墙效果代码
代码语言：html
所属分类：画廊相册
代码描述：Aui-core结合css实现可旋转三维图片墙效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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></title>
<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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Aui-core-1.42-min.js"></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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论1