VUE 中设置图片组三维旋转
2024-07-23 本文已影响0人
你这个锤子
<!doctype html>
<html lang="en" onmousedown="return false">
<head>
<meta charset="utf-8" />
<title>doc</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.preview {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pic {
width: 400px;
height: 230px;
position: absolute;
right: -120px;
top: 50%;
transform-style: preserve-3d;
animation: spin 30s infinite linear;
}
.pic:hover{
animation-play-state: paused;
}
.pic:not(:hover) {
animation-play-state: running;
}
@keyframes spin {
from {
transform: translateY(-90px) perspective(10000px) rotateX(-18deg) rotateY(0deg);;
}
to {
transform: translateY(-90px) perspective(10000px) rotateX(-18deg) rotateY(360deg);;
}
}
div.pic img {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
}
</style>
</head>
<body style="width:100%;height:100vh;overflow: hidden;">
<div style="width:100%;height:100%;position: relative;display: flex;">
<div class="preview">
<img id="previewImg"
src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4" />
</div>
<div class="pic">
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
draggable="false" />
<img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
draggable="false" />
</div>
</div>
<script>
var roY = 1
var rox = -16
var imgList = document.querySelectorAll('div.pic img');
var imgl = Array.from(imgList).length;
var deg = 360 / imgl;
[].forEach.call(imgList, function (img, i) {
img.style.cssText = 'transition: all 3000ms ease; transform: rotateY(' + i * deg + 'deg) translateX(30vw);';
img.setAttribute('ondragstart', 'return false;');
img.addEventListener('click', function () {
// alert('你点击了按钮！');
document.getElementById("previewImg").src = img.src;
[].forEach.call(imgList, function (imgitem, iItem) {
if (i == iItem) {
imgitem.style.cssText = 'transition: all 1000ms ease; transform: rotateY(' + iItem * deg + 'deg) translateX(36vw);';
} else {
imgitem.style.cssText = 'transition: all 1000ms ease; transform: rotateY(' + iItem * deg + 'deg) translateX(30vw);';
}
});
// 旋转轴
var divs = document.querySelectorAll('div.pic');
divs.forEach(function (div) {
div.style.cssText = `transition: all 150ms ease; transform: translateY(-90px) perspective(10000px) rotateX(${rox}deg) rotateY(${deg * roY}deg);`;
});
roY++
});
});
</script>
</body>
</html>
image.png
