3D动画——旋转魔方，卡牌翻转

最新推荐文章于 2025-07-14 21:53:33 发布

Σ'αγαπώ.

最新推荐文章于 2025-07-14 21:53:33 发布

阅读量534

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端服务器 windows

本文链接：https://blog.youkuaiyun.com/CYX_COMnn/article/details/144117987

1效果

效果一

效果二

2.思路实现

2.1旋转魔方

HTML部分

<div class="box">
		<!-- ul 魔方的每一面 -->
		<ul class="list list1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="list list2">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="list list3">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="list list4">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="list list5">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="list list6">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

CSS部分

/* 去除默认样式 */
html,body,ul,li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul,li {
	list-style-type: none;
}
body {
	background-color: #999;
}
.box {
	width: 400px;
	height: 400px;
	margin: 100px auto;
	position: relative;
	transform-style: preserve-3d;/* 开启3D空间 */
	animation: move 6s infinite linear;/* 添加动画 */
}
.list {
	width: 300px;
	height: 300px;
	background-color: #000;
	display: flex;
	/* 让内li盒子平均分布,占满ul盒子 */
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	border-radius:16px;
	padding:10px;
	position: absolute;

}
.list>li {
	width: 90px;
	height: 90px;
	border-radius:16px;
}
/* 设置每一面小方块颜色 */
.list1>li {
	background-color: red;
}
.list2>li {
	background-color: yellow;
}
.list3>li {
	background-color: blue;
}
.list4>li {
	background-color: #cdcdcd;
}
.list5>li {
	background-color: #f90;
}
.list6>li {
	background-color: pink;
}
/*调整模仿每一面的位置*/
.list1 {
	transform: translateZ(150px);
}
.list2 {
	transform: translateZ(-150px);
}
.list3 {
	transform: rotatey(90deg) translatez(150px);
}
.list4 {
	transform: rotatey(90deg) translatez(-150px);
}
.list5 {
	transform: rotatex(90deg) translatez(150px);
}
.list6 {
	transform: rotatex(90deg) translatez(-150px);
}
/* 动画规则 */
@keyframes move {
	0% {
		
	}
	100% {
		transform: rotatey(360deg) rotateX(360deg);
	}
}

首先我们先一个盒子，类名box，将我们的魔方放在大盒子里，

因为魔方有六个面，所以我们在box里写6个ul，设置宽高均为300px ，设置黑色背景，一面9块，所以我们在写9个li标签，设置宽高均为90px，在这里我们给li标签的父元素使用flex布局，让里小盒子平均分配在页面内，并且给ul，li标签均添加16px的圆角

上图便是代码实现的效果，因为内部的小方块紧紧贴着大盒子的边缘，所以我们给大盒子添加一个10px的内边距，

下一步，给每个大盒子里的li标签是指不同的颜色，通过绝对定位，让六个盒子重叠在一起

用transform：rotate()和transform：translate（）来给魔方调整位置

给魔方的每个面旋转90deg，使用transform：translate（）调整位置时根据上下左右前后面来调整xyz轴的位置(注意：取值150px，自身宽高的一半，)

之后就是添加动画了，在类名为box的盒子设置动画时间6s，匀速播放(linear),重复循环(infinite)；

动画规则设置旋转360deg,就可以了,这是,我们写的模仿就会如同效果图一样旋转

2.2翻转卡牌

HTML部分

<div class="item">
		<div class="box box1">
			<!-- 卡牌背面 -->
			<img src="./imgs/puke-back.png" alt="">
		</div>
		<div class="box box2">
			<!-- 卡牌正面 -->
			<img src="./imgs/puke-k.png" alt="">
		</div>
	</div>

CSS部分

        .item {
			width: 190px;
			height: 280pxpx;
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;/* 开启3D空间 */
			transition: all 2s;/* 添加过渡 */
		}
		.box>img {
			width: 190px;
			height: 280px;
			
		}
		.box1 {
			position: absolute; 
			top:0;
			left: 0;
			z-index: 2;
			backface-visibility: hidden;/* 翻转后背面不可见 */
		}
		.box2 {
			position: absolute; 
			top:0;
			left: 0;
			transform: rotatex(180deg);/* 旋转后面的卡牌 */
			
		}
		/* 鼠标悬浮,卡牌翻转 */
		.item:hover {
			transform: rotateY(180deg) ;
		}

首先,用一个大盒子包裹两个小盒子,在小盒子内放置卡牌,之后使用绝对定位,让两个盒子重叠在一起

之后我们给最外面的大盒子添加过渡规则和时间同时给大盒子添加鼠标悬浮效果(hover),让卡牌旋转,

在这个案例中有几点是需要注意的

1.在翻转时,因为绝对定位脱离标准文档流,卡牌背面会覆盖在卡牌正面上在翻转时会始终展示卡牌背面,这是,我们就给box1添加backface-visibility: hidden;反转后,背部课件,就可以了

2.将卡牌翻转后,展示的卡牌正面与我们的卡牌图片是相反的,所以我们要给box2添加一个180deg的旋转,让卡牌展示出我们想要的效果,

素材(感兴趣的小伙伴,保存图片尝试编写)