旋转相册

 

 

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>旋转相册</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

.container {
width: 200px;
height: 100px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
transform: rotateX(-15deg);
}

img {
width: 200px;
height: 100px;
position: absolute;
transition: transform 0.5s;
}

button {
position: absolute;
left: 50%;
bottom: 20%;
}
</style>
</head>

<body>
<div class="container">
<img src="./img/img11.jpg" alt="">
<img src="./img/img12.jpg" alt="">
<img src="./img/img13.jpg" alt="">
<img src="./img/img14.jpg" alt="">
<img src="./img/img15.jpg" alt="">
<img src="./img/img16.jpg" alt="">
<img src="./img/img17.jpg" alt="">
<img src="./img/img18.jpg" alt="">
<img src="./img/img19.jpg" alt="">
</div>

<button class="btn btn-primary">点击旋转</button>

<script>
var imgs = document.querySelectorAll('img');
var step = 0;

imgs.forEach(function (img, index) {
// 0 0 1 40 2 80 N 40N
img.style.transform = 'rotateY(' + index * 40 + 'deg) translateZ(400px)';
});

var btn = document.querySelector('button');

btn.onclick = function () {
step -= 40;
//step 自增 40
imgs.forEach(function (img, index) {
img.style.transform = 'rotateY(' + (index * 40 + step) + 'deg) translateZ(400px)';
});
}

</script>
</body>
</html>

posted @ 2020-10-06 17:52  13522679763-任国强  阅读(145)  评论(0)    收藏  举报