HTML+CSS实现旋转相册

最新推荐文章于 2024-04-18 02:12:11 发布

青青草原我最穷

最新推荐文章于 2024-04-18 02:12:11 发布

阅读量5.7k

点赞数 16

文章标签： html css

本文链接：https://blog.csdn.net/a1120467800/article/details/107769860

版权

运行效果：这里只存放了一张图片在这里插入图片描述
第一步：新建index.css，将以下代码复制粘贴

html {
	background: #000;
	height: 100%;
}


/*最外层容器样式*/

.wrap {
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	/*改变左右上下,图片方块移动*/
}


/*包裹所有容器样式*/

.cube {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	/*匀速*/
	animation-timing-function: linear;
}

@-webkit-keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}


/*定义所有图片样式*/

.pic {
	width: 200px;
	height: 200px;
}

.cube .out_front {
	transform: rotateY(0deg) translateZ(100px);
}

.cube .out_back {
	transform: translateZ(-100px) rotateY(180deg);
}

.cube .out_left {
	transform: rotateY(90deg) translateZ(100px);
}

.cube .out_right {
	transform: rotateY(-90deg) translateZ(100px);
}

.cube .out_top {
	transform: rotateX(90deg) translateZ(100px);
}

.cube .out_bottom {
	transform: rotateX(-90deg) translateZ(100px);
}


/*定义小正方体样式*/

.cube span {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}

.cube .in_pic {
	width: 100px;
	height: 100px;
}

.cube .in_front {
	transform: rotateY(0deg) translateZ(50px);
}

.cube .in_back {
	transform: translateZ(-50px) rotateY(180deg);
}

.cube .in_left {
	transform: rotateY(90deg) translateZ(50px);
}

.cube .in_right {
	transform: rotateY(-90deg) translateZ(50px);
}

.cube .in_top {
	transform: rotateX(90deg) translateZ(50px);
}

.cube .in_bottom {
	transform: rotateX(-90deg) translateZ(50px);
}


/*鼠标移入后样式*/

.cube:hover .out_front {
	transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .out_back {
	transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .out_left {
	transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .out_right {
	transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .out_top {
	transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .out_bottom {
	transform: rotateX(-90deg) translateZ(200px);
}

第二步：新建index.html,将以下代码复制进去

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>css-3d旋转</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<!--/*外层最大容器*/-->
		<div class="wrap">
			<!--	/*包裹所有元素的容器*/-->
			<div class="cube">
				<!--前面图片 -->
				<div class="out_front">
					<img src="img/01.jpg" class="pic" />
				</div>
				<!--后面图片 -->
				<div class="out_back">
					<img src="img/02.jpg" class="pic" />
				</div>
				<!--左图片 -->
				<div class="out_left">
					<img src="img/03.jpg" class="pic" />
				</div>
				<div class="out_right">
					<img src="img/04.jpg" class="pic" />
				</div>
				<div class="out_top">
					<img src="img/05.jpg" class="pic" />
				</div>
				<div class="out_bottom">
					<img src="img/06.jpg" class="pic" />
				</div>
				<!--小正方体 -->
				<span class="in_front">
				<img src="img/07.jpg" class="in_pic" />
			</span>
				<span class="in_back">
			     <img src="img/08.jpg" class="in_pic" />
			</span>
				<span class="in_left">
				<img src="img/09.jpg" class="in_pic" />
			</span>
				<span class="in_right">
				<img src="img/10.jpg" class="in_pic" />
			</span>
				<span class="in_top">
				<img src="img/11.jpg" class="in_pic" />
			</span>
				<span class="in_bottom">
				<img src="img/12.jpg" class="in_pic" />
			</span>
			</div>
		</div>
	</body>
</html>

目录结构：在这里插入图片描述
最后：由于忘记所有代码出处，故自行写了一份。（注：代码非原创，如有侵权，请告知，将第一时间删除）

青青草原我最穷

关注

16
点赞
踩
65

收藏

觉得还不错? 一键收藏
2
评论
HTML+CSS实现旋转相册

运行效果：这里只存放了一张图片第一步：新建index.css，将以下代码复制粘贴html { background: #000; height: 100%;}/*最外层容器样式*/.wrap { position: relative; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; margin: auto; /*改变左右上下,图片方块移动*/
复制链接

扫一扫