纯CSS3实现3D立方体旋转动画

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3实现3D立方体旋转动画的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS3实现3D立方体旋转动画</title>
<style>
	#view{perspective: 500px;width:200px;height:200px;margin: 200px auto;perspective-origin: 250px 100px;}
	@keyframes scroll{
		100%{
			transform: rotate3d(1,1,1,360deg);
		}
	}	
	#cube{width:200px;height:200px;position: relative; animation: scroll 2s linear 7s infinite;transform-style: preserve-3d;}
	.item{
		width: 200px;
		height:200px;
		border: 1px solid black;
		font-size:150px;
		text-align:center;
		background:yellow;
		opacity: 0.7;
		position:absolute;
	}
	@keyframes item1 {
		100%{transform: rotateY(-90deg);}
	}
	@keyframes item2 {
		100%{transform: rotateY(90deg);}
	}
	@keyframes item3 {
		100%{transform: rotateX(90deg);}
	}
	@keyframes item4 {
		100%{transform: rotateX(-90deg);}
	}
	@keyframes item5 {
		100%{transform: translateZ(200PX);}
	}
	@keyframes item6 {
		100%{transform: rotateY(180deg);}
	}
	#item1{z-index: 6;background:yellow; transform-origin: left; animation: item1 1s linear 1s both;}
	#item2{z-index: 5;background:red; transform-origin: right; animation: item2 1s linear 2s both;}
	#item3{z-index: 4;background:green; transform-origin: top; animation: item3 1s linear 3s both;}
	#item4{z-index: 3;background:blue; transform-origin: bottom; animation: item4 1s linear 4s both;}
	#item5{z-index: 2;background:silver; transform-origin: center; animation: item5 1s linear 5s both;}
	#item6{z-index: 1;background:pink; transform-origin: center; animation: item6 1s linear 6s both;}

</style>

</head>
<body>

<div id="view">
	<div id="cube">
		<div class="item" id="item1">1</div>
		<div class="item" id="item2">2</div>
		<div class="item" id="item3">3</div>
		<div class="item" id="item4">4</div>
		<div class="item" id="item5">5</div>
		<div class="item" id="item6">6</div>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)