（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1

图片示例

html

<!-- 转动区域 -->
<section id="slideshow">
	<div class="entire-content">
		<div  class="bd-bg-center">
			<img src="~@/assets/image/index/bg-center8.png" width="90%" />
		</div>
		<div class="content-carrousel">
			<div 
			class="shadow" 
			:style="{transform: 'rotateY(' + index * (360/funList.length) + 'deg) translateZ(290px)',}" 
			v-for="(item,index) in funList" @click="toPage(item)">
				<svg-icon :icon-class="item.icon" />
				<p> {{item.name}}</p>
			</div>
		</div>
	</div>
</section>

css

	/* 3D Slideshow */
* {
		margin: 0;
		padding: 0;
		border: none!important;
	}

	html,
	body {
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #b1e4e2;
	}

	#slideshow {
		margin: 0 auto;
		padding-top: 6vh;
		box-sizing: border-box;
		// height: 600px;
		width: 100%;
		// background-color: #6adecd;
		box-sizing: border-box;
	}

	// 整个地球仪盒子
	.entire-content {
		margin: auto;
		// width: 80px;
		width: 80px;
		perspective: 1000px;
		position: relative;
		padding-top: 80px;
		// perspective-origin: 50% 0%;
		// 整个盒子呈3d展示 图片可以放在环形中间
		transform-style: preserve-3d;
		transform: rotateX(-2deg);
	}
	// 中间圆形球体
	.bd-bg-center {
		width: 690px;
		min-width: 580px;
		height: 400px;
		min-height: 380px;
		position: absolute;
		top: -56.25%;
		left: 50%;
		transform: translate(-50%, 0);
		pointer-events: none;
		z-index: 1;
	}
	.bd-bg-center img {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
	
	// 转动区域
	.content-carrousel {
		width: 100%;
		position: absolute;
		top: 122%;
		left:-16px;
		float: right;
		transform-origin: 50% 50%;
		animation: rotar 18s infinite linear;
		transform-style: preserve-3d;
	}
	.content-carrousel>img {
		// transform-origin: 50% 50%;
		// animation: rotar2 15s infinite linear!important;
		// transform-style: preserve-3d!important;
		animation-play-state: paused!important;
	}
	
	.content-carrousel:hover {
		animation-play-state: paused;
		cursor: pointer;
	}
	.content-carrousel:hover .shadow {
		animation-play-state: paused!important;
	}
	
	.content-carrousel div {
		width: 100%;
		height: 80px;
		border: 1px solid #3b444b;
		// overflow: hidden;
		position: absolute;
		// background: url(../../assets/image/app_bg.png);
		// background-size: 100% 100%;
	}
	
	// 图片盒子 背景
	.shadow {
		width: 120px;
		height: 120px;
		position: absolute;
		// box-shadow: 0px 0px 20px 0px #000;
		border: 1px solid transparent;
		border-radius: 50%;
		background: url(../../assets/image/app_bg.png);
		background-size: 100% 100%;
		text-align: center;
		line-height: 94px;
	}
	
	// 图片下方文字
	.shadow p {
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-size: 14px;
		position: absolute;
		bottom: -60px;
		left: 50%;
		transform: translate(-50%,0);
	}

	// 图片里的小图标
	.content-carrousel  div .svg-icon {
		// image-rendering: auto;
		transition: all 300ms;
		width: 40%;
		height: 40%;
		// border-radius: 50%;
		color: #FFFFFF;
	}

	.content-carrousel div .svg-icon:hover {
		transform: scale(1.2);
		transition: all 300ms;
	}

	@keyframes rotar {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}
	@-moz-keyframes rotar {
	  0% {
	    transform: rotateY(0deg);
	  }
	
	  100% {
	    transform: rotateY(360deg);
	  }
	}
	
	@-ms-keyframes rotar {
	  0% {
	    transform: rotateY(0deg);
	  }
	
	  100% {
	    transform: rotateY(360deg);
	  }
	}
	
	@-webkit-keyframes rotar {
	  0% {
	    transform: rotateY(0deg);
	  }
	
	  100% {
	    transform: rotateY(360deg);
	  }
	}