
.coverflow {
	position: relative;
	width: 800px;
	height: 300px;
	margin: 0 auto;
	perspective: 1200px;
	overflow: visible;
}

.coverflow-item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 60%;
	height: 100%;
	transition: transform 0.6s ease, opacity 0.6s ease;
	transform-origin: center center;
	opacity: 0;
}

.coverflow-item img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	object-fit: cover;
}

/* 图片说明条 */
.coverflow-caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 8px 12px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 14px;
	border-radius: 0 0 10px 10px;
	text-align: center;
}

/* 中间图片 */
.coverflow-item.active {
	transform: translateX(-50%) scale(1) rotateY(0deg);
	opacity: 1;
	z-index: 3;
}

/* 左右图片 */
.coverflow-item.left {
	transform: translateX(-150%) scale(0.8) rotateY(30deg);
	opacity: 0.7;
	z-index: 2;
}

.coverflow-item.right {
	transform: translateX(50%) scale(0.8) rotateY(-30deg);
	opacity: 0.7;
	z-index: 2;
}

/* 隐藏图片 */
.coverflow-item.hidden-left {
	transform: translateX(-300%) scale(0.6) rotateY(40deg);
	opacity: 0;
}

.coverflow-item.hidden-right {
	transform: translateX(200%) scale(0.6) rotateY(-40deg);
	opacity: 0;
}


.coverflow-container {
	position: relative;
	width: 800px;
	margin: 0 auto;
}

.coverflow-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 40px;
	color: #333;
	cursor: pointer;
	user-select: none;
	z-index: 10;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
}

.coverflow-control.left {
	left: 0px;
}

.coverflow-control.right {
	right: 0px;
}
