CSS旋转魔方

我不是费圆

发布于 2020-09-21 16:49:48

1.2K0

发布于 2020-09-21 16:49:48

文章被收录于专栏：鲸鱼动画鲸鱼动画

CSS旋转魔方

想不想做一个3D魔方，把儿子的照片放进去，外面是你，里面是他。本人从业至今，自诩是动画机器人，苦心钻研各种动画，精通CSS3、Canvas等，不管你要做什么，关注我一个人就够了，跟我一起把代码写活。

一定要先做下广告，希望大家浏览博客的同时，可以点一下我的置顶博文。本人入驻CSDN一年，作品都是开源，没有任何一篇博客要求付费可读，并及时回复各种疑难问题，我不需要大家给我任何的经济援助，你的鼓励才是我发表博文最大的动力。

如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！

前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？

不说了，上源码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>亲子相册</title>
<style>
html,body{
	width: 100%;
	height: 100%;
	margin:0;
	background: url(https://i02piccdn.sogoucdn.com/73750308f69893a3);
	background-repeat:repeat;
}
.box{
	width: 100%;
	height: 400px;
	position: absolute;
	top: 19%;
 	transform: rotateY(45deg) rotateX(-20deg);
	transform-style: preserve-3d;	
}
.box:first-child{
	left:24%;
}
.box:last-child{
	right:24%;
}
/*里面的盒子*/
.box> .in{
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
 	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	/*开启3d*/
	transform-style: preserve-3d;
	transform: translate(-50%,-50%) rotateY(45deg) rotateX(-20deg);
	/*调用动画*/
	animation: mofan 5s linear 0s infinite normal;	
	z-index: 100;

}
 
/*里面盒子六个面的共同值*/
.box> .in>div{
	width: 100px;
	height: 100px;
	position: absolute;
	opacity: 0.7;
	border: 1px solid white; 
}

/*里面盒子的六个面*/
/*前*/
.n1{
	background-color: #00ffff; 
	transform:translateZ(51px); 
}
/*后*/
.n2{ 
 	background-color: black;
	transform: translateZ(-51px);


}
/*左*/
.n3{
	background-color: black; 
	transform: translateX(-51px) rotateY(90deg);
}
/*右*/
.n4{ 
 	background-color: #00ffff;
	transform: translateX(51px) rotateY(90deg);
}
/*上*/
.n5{ 
 	background-color: #00ffff;
	transform: translateY(-51px) rotateX(90deg);
}
/*下*/
.n6{
 	background-color: black;
	transform: translateY(51px) rotateX(90deg);
}
/*里面盒子的六个面结束*/
/*动画*/
@keyframes mofan{
	from{
		transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
	}
	to{
		transform: translate(-50%,-50%) rotateY(360deg) rotateX(0deg);
	}
}

@keyframes nixuan{
	from{
		transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
	}
	to{
		transform: translate(-50%,-50%) rotateY(-360deg) rotateX(0deg);
	}
}



/*外面的盒子*/

.box>.out{
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center; 
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%,-50%) ;
	/*调用动画*/
	animation: mofan 5s linear 0s infinite normal;
	color: white; 
	
}
  
 

.box>.out>.t1,.t2,.t3,.t4,.t5,.t6{
	width: 200px;
	height: 200px;
	position: absolute;
	opacity: 0.5;
	border: 1px solid white;
	transition: all .3s;
}
/*前*/
.t1{ 
	background-color: #92C7DC;
	transform:translateZ(100px);
}
.t1>img{height:100%}
/*后*/
.t2{ 
	background-color: #92C7DC;
	transform: translateZ(-100px);


}
/*左*/
.t3{ 
	background-color: #92C7DC;
	transform: translateX(-100px) rotateY(90deg);
}
/*右*/
.t4{ 
	background-color: #92C7DC; 
	transform: translateX(100px) rotateY(90deg);
}
/*上*/
.t5{ 
	background-color: #92C7DC;
	transform: translateY(-100px) rotateX(90deg);
}
/*下*/
.t6{ 
	background-color: #92C7DC;
	transform: translateY(100px) rotateX(90deg);
}

.box:hover>.out>.t1{
	transform: translateZ(300px);
}

.box:hover>.out>.t2{
	transform: translateZ(-300px);
}
.box:hover>.out>.t3{
	transform: translateX(-300px) rotateY(90deg);
}

.box:hover>.out>.t4{
	transform: translateX(300px) rotateY(90deg);
}

.box:hover>.out>.t5{
	transform: translateY(-300px) rotateX(90deg);
}
.box:hover>.out>.t6{
	transform: translateY(300px) rotateX(90deg);
}

/*鼠标悬浮时外盒子逆转*/
 .box:hover>.out{
 	animation: nixuan 5s linear 0s infinite normal;
 }
 
	
.n1,.n4,.n5{
	background-image: linear-gradient(to right,#00ffff,black)
}

.k1{
	width: 29.3px;
	height: 29.3px;
	border: 2px solid white;
	float: left;
	border-radius: 2px;
}
</style>
</head>
<body>

<div class="box">
	<div class="in">
		<div class="n1">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n2">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n3">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n4">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n5">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n6">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
	</div>
	<div class="out">
		<div class="t1"><img src="https://img-blog.csdnimg.cn/2020090116353966.png#pic_center" alt=""></div>
		<div class="t2"></div>
		<div class="t3"></div>
		<div class="t4"></div>
		<div class="t5"></div>
		<div class="t6"></div>
	</div>
</div>
<div class="box">
	<div class="in">
		<div class="n1">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n2">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n3">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n4">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n5">
			<div class="k1"><img src="https://img-blog.csdnimg.cn/20200901163533997.png#pic_center" alt=""></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
		<div class="n6">
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
			<div class="k1"></div>
		</div>
	</div>
	<div class="out">
		<div class="t1"></div>
		<div class="t2"></div>
		<div class="t3"></div>
		<div class="t4"></div>
		<div class="t5"></div>
		<div class="t6"></div>
	</div>
</div>
</body>
</html>

文章主题部分已标明注释，毕竟是CSS页面，大批量的注释没有太多意义，如果在动画方面有些许疑问，可以评论在下方，或单独私信我，也可以浏览“ 这篇 ” 文章。

本人已入驻CSDN近两年，所有作品都是开源，也从未在文章上设置“粉丝可读、VIP可读、付费可读”，但一直没有什么人气。希望路过的你可以阅读一下其它文章，万分感激。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css