为了照顾新手,直接使用js来写,不使用jq
直接上代码:
<!DOCTYPE html>
<html>
<!--lol皮肤-->
<!--图片来源是lol官网-->
<head>
<meta charset="UTF-8">
<title>我现在拥有的皮肤</title>
<style>
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
background: #000000;
overflow: hidden;
}
#stage {
background: url("http://ossweb-img.qq.com/images/lol/img/profileicon2/profileicon745.jpg");
background-size: 100%;
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/*以下是设置元素的属性在3d中*/
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/*造成前倾的操作*/
-webkit-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-ms-transform: perspective(1000px);
-o-transform: perspective(1000px);
transform: perspective(1000px);
}
#stage img {
width: 200px;
position: absolute;
/*设置倒影*/
-webkit-box-reflect: below 10px;
cursor: pointer;
}
</style>
<script>
var mystage;
var imgslenght;
var mydagger;
var str;
var imgs
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var iscur = false;
var currentx = 0;
var currenty = 0;
var degx = 0;
var degy = 0;
window.onload = function() {
mystage = document.querySelector("#stage");
imgs = document.querySelectorAll("img");
imgslenght = imgs.length;
mydagger = 360 / imgslenght;
console.log(mydagger);
myinit();
//取消默认拖动
document.ondragstart = function() {
return false;
};
//鼠标按下的时候
document.documentElement.addEventListener("mousedown", function(e2) {
iscur = true;
var e = e2 || event;
x1 = e.clientX;
y1 = e.clientY;
document.documentElement.onmousemove = function(e1) {
if(iscur == false) {
return false;
} else {
var e3 = e1 || event;
x2 = e3.clientX;
y2 = e3.clientY;
currentx = x2 - x1;
currenty = y2 - y1;
//y轴方向
degx -= (currenty * 0.4);
//x轴方向
degy += (currentx * 0.3);
var str = "perspective(1000px) rotateX(" + degx + "deg) rotateY(" + degy + "deg)";
css3(document.getElementById("stage"), str);
x1 = x2;
y1 = y2;
}
};
});
document.documentElement.addEventListener("mouseup", function() {
iscur = false;
});
}
//设置兼容性
function css3(element, value) {
var arr = ["o", "ms", "moz", "webkit", ""];
var lenght = arr.length;
for(var i = 0; i < lenght; i++) {
element.style[arr[i] + "Transform"] = value;
}
};
//设置初始化的
function myinit() {
for(var i = 0; i < imgslenght; i++) {
str = "rotateY(" + mydagger * i + "deg) translatez(300px)";
css3(imgs[i], str);
}
}
</script>
</head>
<body>
<div id="stage">
<img src="http://ossweb-img.qq.com/images/lol/appskin/12004.jpg" title="荒野镖客" alt="荒野镖客" />
<img src="http://ossweb-img.qq.com/images/lol/appskin/96004.jpg" title="圣诞驯鹿" alt="圣诞驯鹿" />
<img src="http://ossweb-img.qq.com/images/lol/appskin/10007.jpg" title="防爆天使" alt="防爆天使" />
<img src="http://ossweb-img.qq.com/images/lol/appskin/79003.jpg" title="圣诞老人" alt="圣诞老人" />
</body>
</html>
以上是全部代码,效果大家可以试一试,
感觉没啥难点,唯一的难点就是在3d这部分的时候,空间感会比较麻烦,大家可以自己去百度下