旋转3D盒子

最新推荐文章于 2023-01-13 12:47:03 发布

郑子健_

最新推荐文章于 2023-01-13 12:47:03 发布

阅读量113

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/m0_56175231/article/details/119355744

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		html {
			perspective: 800px;
		}
		.cube {
			width: 200px;
			height: 200px;
			margin: 100px auto;
			transform-style: preserve-3d;
			animation: scoll 10s linear infinite;
		}
		.cube div {
			width: 200px;
			height: 200px;
			opacity: 0.7;
			position: absolute;
		}
		img {
			vertical-align: top;
		}
		.box1 {
			transform: rotateY(90deg) translateZ(100px);
		}
		.box2 {
			transform: rotateY(-90deg) translateZ(100px);
		}
		.box3 {
			transform: rotateX(90deg) translateZ(100px);
		}
		.box4 {
			transform: rotateX(-90deg) translateZ(100px);
		}
		.box5 {
			transform: rotateY(180deg) translateZ(100px);
		}
		.box6 {
			transform: rotateX(0) translateZ(100px);
		}
		@keyframes scoll {
			from {
				transform: rotateX(0) rotateZ(0);
			}
			to {
				transform: rotateX(360deg) rotateZ(360deg);
			}
		}
	</style>
</head>
<body>
	<!-- 需要引入六张图片-->
	<div class="cube">
		<div class="box1">
			<img src="img/1.jpg" />
		</div>
		<div class="box2">
			<img src="img/2.jpg" />
		</div>
		<div class="box3">
			<img src="img/3.jpg" />
		</div>
		<div class="box4">
			<img src="img/4.jpg" />
		</div>
		<div class="box5">
			<img src="img/5.jpg" />
		</div>
		<div class="box6">
			<img src="img/6.jpg" />
		</div>
	</div>
</body>
</html>

郑子健_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转3D盒子

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Title</title> <style> html { perspective: 800px; } .cube { width: 200px; height: 200px; margin: 100px auto; transform-style: prese
复制链接

扫一扫

专栏目录