样式
image.png
image.png
代码
1.html
<div id="perspective">
<!--wrap start-->
<div id='wrap'>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=5042f47619f9e0e3f8a210178580cdd4" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1114%2F0I120152936%2F200I1152936-5-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=300a614d679648c0ca20000c2a3cdcf0" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100201033TN7-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=307c978e249846eab886f8ff742e599e" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F051220112022%2F200512112022-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=e344b292f0f6f261e2f13cf1a8923548" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910020941061434-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=de0b10e47efdb36ca6f4769af9208076" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F140505%2F1-140505004P3.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=55871eb5bae557651ad619393f4719dc" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100220062L3N-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568044&t=c1751114424e3759fea2a7ab7139bea7" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568045&t=50fadea61cac5cdb2e9e7cc2200b2f3d" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F210103%2F1-210103211Z8.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568045&t=fd33d3ffe4acc63a322299693639c1d4" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.1ppt.com%2Fuploads%2Fallimg%2F2009%2F1_200907194125_2.JPG&refer=http%3A%2F%2Fimg.1ppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568045&t=1c5020aef335722d57c23cee0206f00d" width="133" height="200" alt="#" />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210Q6133S9A22-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661568045&t=f5f8e456bdfc31504e31bedf82f129ac" width="133" height="200" alt="#" />
<p></p>
</div>
<!--wrap end-->
</div>
2.css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
overflow: hidden;
}
#perspective {
perspective: 800px;
}
#wrap {
width: 120px;
/*133:200 4:6 */
height: 180px;
margin: 0 auto;
position: relative;
/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(0deg);
}
#wrap img {
width: 100%;
height: 100%;
position: absolute;
box-shadow: 0 0 8px #000000;
transform: rotateY(0deg) translateZ(0px);
/*倒影：朝向 偏移 遮盖*/
/*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#wrap p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 124, 0.2), rgba(0, 0, 0, 0));
border-radius: 100%;
position: absolute;
left: 50%;
top: 102%;
margin-left: -600px;
margin-top: -600px;
transform: rotateX(90deg);
}
3.js
window.onload = function () {
var oWrap = document.getElementById('wrap');
var oImg = oWrap.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;
var nowX, nowY, lastX, lastY, minusX = 0,
minusY = 0;
var roY = 0,
roX = -10;
var timer;
for (var i = 0; i < oImgLength; i++) {
oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';
}
mTop();
window.onresize = mTop;
function mTop() {
var wH = document.documentElement.clientHeight;
oWrap.style.marginTop = wH / 2 - 180 + 'px';
}
// 拖拽：三个事件-按下 移动 抬起
//按下
document.onmousedown = function (ev) {
ev = ev || window.event;
//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
lastX = ev.clientX;
lastY = ev.clientY;
//移动
this.onmousemove = function (ev) {
ev = ev || window.event;
clearInterval(timer);
nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
nowY = ev.clientY; // clientY ………………………………顶部………………
//当前坐标和前一点坐标差值
minusX = nowX - lastX;
minusY = nowY - lastY;
//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
//前一点的坐标
lastX = nowX;
lastY = nowY;
}
//抬起
this.onmouseup = function () {
this.onmousemove = null;
timer = setInterval(function () {
minusX *= 0.95;
minusY *= 0.95;
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
clearInterval(timer);
}
}, 13);
}
return false;
}
}
