CSS3动画：3D旋转（立方体）-含背景音乐

最新推荐文章于 2021-06-04 16:41:37 发布

HaanLen

最新推荐文章于 2021-06-04 16:41:37 发布

阅读量1.1k

点赞数 3

分类专栏： JavaScript案例

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103128279

版权

JavaScript案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果显示

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/animation.css" />
	</head>
	<body>
		<embed  src="../music/小坂明子.mp3"></embed>
		<div id="box">
			<div class="minBox"><img src="../img/11.PNG"/></div>
			<div class="minBox"><img src="../img/22.PNG"/></div>
			<div class="minBox"><img src="../img/33.PNG"/></div>
			<div class="minBox"><img src="../img/44.PNG"/></div>
			<div class="minBox"><img src="../img/55.PNG"/></div>
			<div class="minBox"><img src="../img/66.PNG"/></div>
		</div>		
	</body>
</html>

style.css

@charset "utf-8";

*{margin: 0;padding: 0;}
body{
	background: black;
}
#box{
	width: 300px;
	height: 300px;
/*	background: gold;	*/
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	margin: auto auto;
	position: fixed;
	transform: rotateX(15deg) rotateY(15deg);
	transform-style: preserve-3d;	
}
.minBox{
	height: 100%;
	width: 100%;
	position: absolute;
}
.minBox>img{
	height: 100%;
	width: 100%;	
}
/*成为立方体*/
#box>div:nth-child(1){
	transform: translatez(150px);
}
#box>div:nth-child(2){
	transform: rotateY(90deg) translatez(150px);
}
#box>div:nth-child(3){
	transform: rotateY(-90deg) translatez(150px);
}
#box>div:nth-child(4){
	transform: rotateX(90deg) translatez(150px);
}
#box>div:nth-child(5){
	transform:rotateX(-90deg) translatez(150px);
}
#box>div:nth-child(6){
	transform: rotateY(180deg) translatez(150px);
}

animation.css

@charset "utf-8";

@keyframes cube{
	from{transform: scale(1)rotateY(20deg) rotateX(20deg);}
	20%{transform: scale(1.5) translateZ(60px) rotateY(70deg) rotateX(70deg);	}
	40%{transform: scale(1) rotateY(110deg) rotateX(110deg);}
	60%{transform: scale(1.5) rotateY(160deg) rotateX(160deg);}	
	80%{transform: scale(1) rotateY(210deg) rotateX(210deg);}	
	to{transform: scale(2) rotateY(260deg) rotateX(340deg);;}
}
#box{
	animation: cube 20s linear infinite;
}

源码下载地址：https://github.com/YanHSana/cube