百变鹏仔-专注前端行业精选

利用css动画实现一个动态旋转的3D立方体效果

作者：鹏仔先生日期：2020-06-01 16:51:35浏览：1212分类：CSS

<style type="text/css">
	div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
		margin:0;
		padding:0;
	}
	body,html{
		height: 100%;
	}
	body{
		display: flex;
		justify-content: center;
		align-items: center;
		background: black;
	}
	.box{
		width: 200px;
		height: 200px;
		/*background: red;*/
		position: relative;
		transform: rotateX(-30deg) rotateY(30deg);
		transform-style: preserve-3d;
		animation: xuanzhuan 5s infinite linear;
	}
	@keyframes xuanzhuan{
		0%{
			transform: rotateX(0deg) rotateY(0deg);
		}
		100%{
			transform: rotateX(360deg) rotateY(360deg);
		}
	}
	.box:hover{
		animation: xuanzhuan 5s infinite paused;
	}
	.box a{
		display: block;
		opacity: .7;
		position: absolute;
		left: 0;
		top: 0;
		border: 1px solid #fff;
	}
	.box_a{
		width: 200px;
		height: 200px;
		background: black;
		transition: all 3s;
	}
	.box_b{
		width: 100px;
		height: 100px;
		background: #89fc6b;
		margin: 50px;
	}
	.box .box_a:nth-child(1){
		transform: translateZ(100px);
	}
	.box .box_a:nth-child(2){
		transform: rotateY(180deg) translateZ(100px);
	}
	.box .box_a:nth-child(3){
		transform: rotateY(-90deg) translateZ(100px);
	}
	.box .box_a:nth-child(4){
		transform: rotateY(90deg) translateZ(100px);
	}
	.box .box_a:nth-child(5){
		transform: rotateX(90deg) translateZ(100px);
	}
	.box .box_a:nth-child(6){
		transform: rotateX(-90deg) translateZ(100px);
	}



	.box .box_b:nth-child(7){
		transform: translateZ(50px);
	}
	.box .box_b:nth-child(8){
		transform: rotateY(180deg) translateZ(50px);
	}
	.box .box_b:nth-child(9){
		transform: rotateY(-90deg) translateZ(50px);
	}
	.box .box_b:nth-child(10){
		transform: rotateY(90deg) translateZ(50px);
	}
	.box .box_b:nth-child(11){
		transform: rotateX(90deg) translateZ(50px);
	}
	.box .box_b:nth-child(12){
		transform: rotateX(-90deg) translateZ(50px);
	}



	.box:hover .box_a:nth-child(1){
		transform: translateZ(150px);
	}
	.box:hover .box_a:nth-child(2){
		transform: rotateY(180deg) translateZ(150px);
	}
	.box:hover .box_a:nth-child(3){
		transform: rotateY(-90deg) translateZ(150px);
	}
	.box:hover .box_a:nth-child(4){
		transform: rotateY(90deg) translateZ(150px);
	}
	.box:hover .box_a:nth-child(5){
		transform: rotateX(90deg) translateZ(150px);
	}
	.box:hover .box_a:nth-child(6){
		transform: rotateX(-90deg) translateZ(150px);
	}
</style>

<div class="box">
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_a"><img src="http://www.sharedbk.com/content/uploadfile/201807/thum-032b1532577718.jpg" width="200px" height="200px" /></a>
	<a href="#" class="box_b"></a>
	<a href="#" class="box_b"></a>
	<a href="#" class="box_b"></a>
	<a href="#" class="box_b"></a>
	<a href="#" class="box_b"></a>
	<a href="#" class="box_b"></a>
</div>