html+css做会旋转的正方体

原创已于 2025-04-18 20:02:40 修改 · 451 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #tensorflow

于 2025-04-18 19:54:44 首次发布

首先写出html样式，一个盒子内嵌套六个正方形小盒子，代码如下：

（注意：插入的图片大小需要保持一致，本处的图片大小为1000*1000）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>正方体</title>
		<link href="css/zft.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<div class="box">
			<div class="front"><img src="img/1.jpg"/></div>
			<div class="back"><img src="img/2.jpg"/></div>
			<div class="left"><img src="img/3.jpg"/></div>
			<div class="right"><img src="img/4.jpg"/></div>
			<div class="top"><img src="img/5.jpg"/></div>
			<div class="bottom"><img src="img/6.jpg"/></div>
		</div>
	</body>
</html>

其次，设置css样式，代码如下：

*{margin: 0%;padding: 0%;}


.box{
	width: 200px;
	height: 200px;
	perspective: 5000px;
	margin: 150px 0px 0px 150px;
	position: relative; /* 相对定位 */
	transform-style: preserve-3d;  /* 变形风格3D */
	transform: rotateX(-30deg) rotateY(30deg);
	transition: transform 3s linear 0s; 
}

.front,.back,.left,.right,.top,.bottom{
	background-color: #aaaaff;
	width: 200px;
	text-align: center;
	height: 200px;
	position: absolute;
	border: 1px solid #ffffff;
	left: 0;
	top: 0;
	opacity: 1;
}

.front img,.back img,.left img,.right img,.top img,.bottom img{
	width: 100%;
	}

.front{transform: translateZ(100px);}
.back{transform: translateZ(-100px);}
.left{transform: rotateY(90deg) translateZ(-100px);}
.right{transform: rotateY(90deg) translateZ(100px);}
.top{transform: rotateX(90deg) translateZ(100px);}
.bottom{transform: rotateX(90deg) translateZ(-100px);}

.box:hover{
	transform: rotateX(330deg) rotateY(390deg) rotateZ(360deg);
}

最后，会旋转的正方体就完成了（鼠标移上去时会发生旋转效果）：