CSS旋转魔方

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可读、付费可读”,但一直没有什么人气。希望路过的你可以阅读一下其它文章,万分感激。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页精准布局,学会受用一生

      无论哪种网页布局,首先统筹全局,从最外侧开始看,如图: 我们先分左右后分上下,比如最外侧是:侧边栏、内容; 内容区域有:导航栏、头部、内容; 内容中再分...

    我不是费圆
  • P不能包div?

    是什么原因导致的呢? W3C这样说:“ 如果你这样做,将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的嵌套规则,如下:

    我不是费圆
  • CSS动画的毕业设计

    我 @keyframes 一个动画,动画的名字叫 play,现在我想让谁动,就把play交给谁。 我把play递给了img,img伸出双手接住了我的play,...

    我不是费圆
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • 原生JS实现拖拽鼠标绘画

    越陌度阡
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • APICloud开发者进阶之路|【案例源码】简单时间轴

    因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:

    APICloud
  • HTML5选择器

    czjwarrior

扫码关注云+社区

领取腾讯云代金券