【HTML+CSS+JS】前端三剑客实现3D旋转照片墙

JavaScript前端开发：HTML+CSS+JS三者结合理解 #生活技巧# #工作学习技巧# #编程语言学习路径#

最近大家应该都对3D照片墙很心动吧，赶快拿走给女朋友制作一个，让她知道代码的浪漫

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oeS576K576KLmphdmE=,size_20,color_FFFFFF,t_70,g_se,x_16

源码如下：

1.把html 文件和img文件放在同级目录下

2.照片格式要注意是否一致哦

<!DOCTYPE html>

<head>

<title>3D旋转照片墙</title>

* {

margin: 0;

padding: 0;

}

body {

background: #222;

overflow: hidden;

user-select: none;

}

@keyframes rotate {

100% {

transform: rotateY(360deg);

}

.perspective {

perspective: 600px;

}

.wrap {

width: 135px;

height: 240px;

margin: 100px auto;

position: relative;

transform: rotateX(-20deg) rotateY(0deg);

transform-style: preserve-3d;

}

.wrap img {

display: block;

position: absolute;

width: 100%;

height: 100%;

transform: rotateY(0deg) translateZ(0px);

background: transparent;

box-shadow: 0 0 4px #fff;

border-radius: 5px;

}

.wrap p {

width: 1200px;

height: 1200px;

background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));

position: absolute;

border-radius: 50%;

left: 50%;

top: 100%;

margin-left: -600px;

margin-top: -600px;

transform: rotateX(90deg);

}

</style>

</head>

<body>

<p></p>

</div>

var oImg = document.getElementsByClassName('f1')

var oImg2 = document.getElementsByClassName('f2')

var oImg3 = document.getElementsByClassName('f3')

var len = oImg.length;

console.log(len)

var deg = 360 / len;

var oWrap = document.getElementById("imgwrap");

// var oWrap=document.querySelector('.wrap');

//页面加载完毕在执行的代码

window.onload = function () {

Array.prototype.forEach.call(oImg, function (ele, index, self) {

// 旋转并沿Z轴平移

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";

//过渡时间1s

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

Array.prototype.forEach.call(oImg2, function (ele, index, self) {

// 旋转并沿Z轴平移

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";

//过渡时间1s

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

Array.prototype.forEach.call(oImg3, function (ele, index, self) {

// 旋转并沿Z轴平移

ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";

//过渡时间1s

ele.style.transition = "1s " + (len - index) * 0.1 + "s";

});

// Array.prototype.forEach.call(oImg, function (ele, index, self) {

// // 旋转并沿Z轴平移

// ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";

// //过渡时间1s

// ele.style.transition = "1s " + (len - index) * 0.1 + "s";

// });

}

//翻动3D相册

var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;

document.onmousedown = function (e) {

// 点击设置初值

lastX = e.clientX;

lastY = e.clientY;

this.onmousemove = function (e) {

newX = e.clientX;

newY = e.clientY;

minusX = newX - lastX;

minusY = newY - lastY;

rotX -= minusY * 0.2;

rotY += minusX * 0.1;

oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";

lastX = newX;

lastY = newY;

}

this.onmouseup = function (e) {

//鼠标松开

this.onmousemove = null;//清除鼠标移动

}

</script>

</body>

</html>

成功了别忘了三连嗷~

【HTML+CSS+JS】前端三剑客实现3D旋转照片墙

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享