3D魔方旋转

最新推荐文章于 2022-05-05 13:52:06 发布

梦灯

最新推荐文章于 2022-05-05 13:52:06 发布

阅读量874

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/mengdeng19950715/article/details/99682153

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.效果

2. index.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="box">
		<div class="box1">
			<div class="font"></div>
			<div class="back"></div>
			<div class="top"></div>
			<div class="bottom"></div>
			<div class="left"></div>
			<div class="right"></div>

			<i class="i-font"></i>
			<i class="i-back"></i>
			<i class="i-top"></i>
			<i class="i-bottom"></i>
			<i class="i-left"></i>
			<i class="i-right"></i>

		</div>
	</div>
</body>
</html>

3 style.css

body{
	background: url(img/3.png);
	background-size: cover;

	margin: 0;
	padding: 0;

}

.box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	perspective: 900px;
}

.box1{
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	animation: dh 20s linear infinite;

}

.box .box1 div{
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 20px;
	line-height: 200px;
	text-align: center;
	color: white;
	transition: 0.6s;

}

.box .box1 .font{
	background: url(img/s1.jpg);
	transform: translateZ(100px);
}

.box .box1 .back{
	background: url(img/s1.jpg);
	transform: translateZ(-100px) rotateY(180deg);
}

.box .box1 .right{
	background: url(img/s1.jpg);
	transform: rotateY(90deg) translateZ(100px);
}

.box .box1 .left{
	background: url(img/s1.jpg);
	transform: rotateY(-90deg) translateZ(100px);
}

.box .box1 .top{
	background: url(img/s1.jpg);
	transform: rotateX(90deg) translateZ(100px);
}

.box .box1 .bottom{
	background: url(img/s1.jpg);
	transform: rotateX(-90deg) translateZ(100px);
}


/*悬浮效果*/

.box .box1:hover .font{
	background: url(img/s1.jpg);
	transform: translateZ(200px);
}

.box .box1:hover .back{
	background: url(img/s1.jpg);
	transform: translateZ(-200px) rotateY(180deg);
}

.box .box1:hover .right{
	background: url(img/s1.jpg);
	transform: rotateY(90deg) translateZ(200px);
}

.box .box1:hover .left{
	background: url(img/s1.jpg);
	transform: rotateY(-90deg) translateZ(200px);
}

.box .box1:hover .top{
	background: url(img/s1.jpg);
	transform: rotateX(90deg) translateZ(200px);
}

.box .box1:hover .bottom{
	background: url(img/s1.jpg);
	transform: rotateX(-90deg) translateZ(200px);
}


/*形成魔方并且旋转*/
@keyframes dh{
	0%{transform: rotateX(0deg) rotateY(0deg)}
	100%{transform: rotateX(360deg) rotateY(360deg);}
}

.box .box1 i{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	width: 100px;
	height: 100px;
}

.box .box1 .i-font{
	background: url(img/s7.jpg);
	transform: translateZ(50px);
}

.box .box1 .i-back{
	background: url(img/s7.jpg);
	transform: translateZ(-50px) rotateY(180deg);
}

.box .box1 .i-right{
	background: url(img/s7.jpg);
	transform: rotateY(90deg) translateZ(50px);
}

.box .box1 .i-left{
	background: url(img/s7.jpg);
	transform: rotateY(-90deg) translateZ(50px);
}

.box .box1 .i-top{
	background: url(img/s7.jpg);
	transform: rotateX(90deg) translateZ(50px);
}

.box .box1 .i-bottom{
	background: url(img/s7.jpg);
	transform: rotateX(-90deg) translateZ(50px);
}