vue & 類class實現3D相冊

效果圖

相冊組件

<template>
	<div class="imgBox">
		<div class="imgList" v-for="item in list" :key="item">
			<img :src="require('./img/' + item + '.jpg')" alt="">
		</div>
	</div>
</template>

<script>
import album from './album.js';
export default {
	data() {
		return {
			list: [1, 2, 3, 4, 5, 6, 7, 8]
		}
	},
	mounted () {
		new album('.imgList', '.imgBox');
	}
}
</script>

<style>
	body, html {
		width: 100%;
		height: 100%;
		background-color: black;
	}
	.imgBox {
		width: 200px;
		height: 150px;
		position: relative;
		margin: 100px auto;
		transform-origin: center center;
		transform-style: preserve-3d;
		transform: rotateX(20deg);
	}
	.imgList {
		position: absolute;
		left: 0;
		top: 0;
	}
	.imgList img {
		
        /*
            倒影
        */
		-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.3));
	}
</style>

album.js 公共類

export default class Album {
	constructor (className, box) {
		this.init(className);
		this.startRotate(document.querySelector(box));
	}
	init (className) {
		let eles = document.querySelectorAll(className);
		let baseDeg = 360 / eles.length;
		// ES6語法，類數組借用數組方法
		[...eles].forEach((item, index) => {
			this.setStyle(item, `rotateY(${index * baseDeg}deg) translateZ(300px)`)
		})
	}
	startRotate (ele) {
        /*
            定時器旋轉相冊
        */
		let i = 0;
		setInterval(() => {
			this.setStyle(ele, `rotateX(20deg) rotateY(${i++}deg)`);
		}, 500);
	}
	setStyle (ele, style) {
		ele.style.transform = style;
	}
}