*{
	margin: 0;
	padding: 0;
	
}

/* 原来容器和主题敲反了 emmmmm */
.carousel-body{
	
	/* 声明3d 的布局 */
	transform-style: preserve-3d;
	
	transition: 1s;
	/*animation: 20s carouselrotate infinite linear;*/
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel-container {
    width: 100%;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    height: 4rem;
    margin-top: 1rem;
}

.carousel-container .item{
	/* 绝对定位 把图片全部叠在一起 */
	position: absolute;
}

/* 通过给子元素不同的Y 实现不同方向 */
/* translateZ(288px) 表示离Z轴有多远 */
/* 用transform-orgin也可以实现 */
/* 可以看到以及有3d的效果了 */
/* 不知道出啥问题了 3d图透明 */
.carousel-container .item:nth-child(1) { 
	transform:rotateY(0deg) translateZ(9rem)
}
.carousel-container .item:nth-child(2) { 
	transform:rotateY(60deg) translateZ(9rem) 
}
.carousel-container .item:nth-child(3) { 
	
	transform:rotateY(120deg) translateZ(9rem) 
}
.carousel-container .item:nth-child(4) { 
	
	transform:rotateY(180deg) translateZ(9rem) 
}
.carousel-container .item:nth-child(5) { 
	
	transform:rotateY(240deg) translateZ(9rem) 
}
.carousel-container .item:nth-child(6) { 
	
	transform:rotateY(300deg) translateZ(9rem) 
}


/* 现在就是旋转的部分 */
/* 其实只要旋转容器就行了 */
/* 后边想做到一次旋转一张图用关键帧就行了 */
@keyframes carouselrotate{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(300deg);
	}
}



/* 现在就是旋转的部分 */
/* 其实只要旋转容器就行了 */
/* 后边想做到一次旋转一张图用关键帧就行了 */
@keyframes itemrotate{
	from{
		transform: translateY(0rem);
	}
	to{
		transform: translateY(1rem);
	}
}