【HTML】CSS 旋转的魔方

最新推荐文章于 2024-05-14 22:45:25 发布

Alexia6

最新推荐文章于 2024-05-14 22:45:25 发布

阅读量610

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_42472682/article/details/103053807

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转的魔方</title>
		<style>
			#father{
				width: 500px;
				height: 500px;
				perspective: 1000px;
				background-color: blanchedalmond;
			}
			#father ul{
				transform-origin: 50% 50%; 
				position: absolute;
				left: 50%;
				top: 50%;
				width: 250px;
				height: 250px;
				transform-style: preserve-3d; 
				list-style: none;
				margin: -125px 0 0 -125px;
				padding: 0;
				font-size: 120px;
				animation: move 4s linear infinite;
			}
			#father ul li{
				width: 100%;
				height: 100%;
				position: absolute;
				opacity: 0.8;
				box-sizing: border-box;
				border: 10px solid orange;
			}
			#father ul li img{
				width: 250px;
				height: 250px;
				position: absolute;
				font-style: normal;
				top: 50%;
				left: 50%;
				transform:translate(-50%,-50%);
				background-color: #fff;
			}
			#m1{
				transform: translateX(-125px) rotateY(90deg);
			}
			#m2{
				transform: translateX(125px) rotateY(-90deg);
			}
			#m3{
				transform: translateY(-125px) rotateX(90deg);
			}
			#m4{
				transform: translateY(125px) rotateX(-90deg);
			}
			#m5{
				transform: translateZ(-125px);
			}
			#m6{
				transform: translateZ(125px);
			}
			@keyframes move{
				0% {
					transform: rotateX(0deg);
				}
				25% {
				    transform: rotateX(180deg);
				}
				50% {
				    transform: rotateX(360deg) rotateY(0deg);
				}
				75% {
				    transform: rotateX(360deg) rotateY(180deg);
				}       
				100% {
				    transform: rotateX(360deg) rotateY(360deg);
				}
			    }
		</style>
	</head>
	<body>
		<div id="father">
			<ul>
				<li id="m1"><img src="img/th.jpg"></li>
				<li id="m2"><img src="img/th2.jpg"></li>
				<li id="m3"><img src="img/th3.jpg"></li>
				<li id="m4"><img src="img/th4.jpg"></li>
				<li id="m5"><img src="img/th5.jpg"></li>
				<li id="m6"><img src="img/th6.jpg"></li>
			</ul>
			
		</div>
	</body>
</html>

Alexia6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【HTML】CSS 旋转的魔方

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>旋转的魔方</title> <style> #father{ width: 500px; height: 500px; perspective: 10...
复制链接

扫一扫