html + css 3d盒子

最新推荐文章于 2024-07-30 20:50:32 发布

m4587

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量151

点赞数 1

文章标签： servlet java html

本文链接：https://blog.csdn.net/m4587/article/details/126044317

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			html {
				perspective: 1000px;
				background-color: black;
			}

			.box {
				width: 200px;
				height: 200px;
				margin: 150px auto;
				position: relative;
				transform-style: preserve-3d;
				animation: xuanzhuan 20s infinite linear;
			}

			@keyframes xuanzhuan {
				0% {
					transform: rotateX(0) rotateY(0);
				}

				100% {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}

			.box>div {
				width: 100%;
				height: 100%;
				position: absolute;
				background-color: #1E9FFF;
				border: 1px solid #999;
				text-align: center;
				line-height: 20px;
			}

			.out-front {
				background-image: url("./img/1cfee8c6eao0hO1.jpg");
				transform: translateZ(100px);

			}

			.out-back {
				background-image: url("./img/2f670792c9GRT2o.jpg");
				transform: translateZ(-100px);
			}

			.out-left {
				background-image: url("./img/482af8e9ec2cEQX.jpg");
				transform: rotateY(90deg) translateZ(100px);
			}

			.out-right {
				background-image: url("./img/6ca95e0c49gKsnl.jpg");
				transform: rotateY(-90deg) translateZ(100px);
			}

			.out-top {
				background-image: url("./img/9e590e121cQmJRX.jpg");
				transform: rotateX(90deg) translateZ(100px);
			}

			.out-bottom {
				background-image: url("./img/b9d464f79cWKoWb.jpg");
				transform: rotateX(-90deg) translateZ(100px);
			}
		</style>

	</head>
	<body>
		<div class="box">
			<div class="out-front"></div>
			<div class="out-back"></div>
			<div class="out-left"></div>
			<div class="out-right"></div>
			<div class="out-top"></div>
			<div class="out-bottom"></div>
		</div>
	</body>
</html>

这里面可以随便换几张图片，欢迎大家一起交流讨论

3的效果就不放图了可以自己去试试看