制作立体旋转酷炫相册

duoba_an

于 2023-12-29 18:03:19 发布

阅读量657

点赞数 13

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/duoba_an/article/details/135296161

版权

一、实验要求

1.相册能够旋转

2.相册要立体

3.鼠标放上去能够展开

二、实验思路

1.首先将要展示的照片准备好

2.照片展示呈立体状态

3.制作鼠标放上去展开效果

4.让相册旋转起来

三、实验步骤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				perspective: 400px;         透视效果
			}

			@keyframes myRotate {          动画效果/旋转方向
				from {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}

			}

			.xuanzhuan {
				margin: 300px;                           距离边框距离
				position: relative;                      相对位置
				transform-style: preserve-3d;             3d效果
				animation: myRotate 10s infinite linear;  设置展示的时长等
			}

			.xuanzhuan>img {
				width: 100px;                             相册的宽
				height: 100px;                            相册的高
				position: absolute;                       绝对位置
			}

			.xuanzhuan:hover>img:first-child {           这里是当鼠标放上                                                
				left: -200px;                            去相册向哪边移动
			}

			.xuanzhuan:hover>img:nth-child(2) {
				top: -200px;
			}

			.xuanzhuan:hover>img:nth-child(3) {
				left: 200px;
			}

			.xuanzhuan:hover>img:nth-child(4) {
				bottom: -300px;
			}

			.xuanzhuan:hover>img:nth-child(5) {
				transform: translateZ(200px);
			}

			.xuanzhuan:hover>img:last-child {
				transform: translateZ(-100px);
			}

			.xuanzhuan>img:first-child {            这里是照片的立体展示
				left: -100px;
				transform-origin: right;
				transform: rotateY(90deg);
			}

			.xuanzhuan>img:nth-child(2) {
				top: -100px;
				transform-origin: bottom;
				transform: rotateX(-90deg);
			}

			.xuanzhuan>img:nth-child(3) {
				left: 100px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}

			.xuanzhuan>img:nth-child(4) {
				bottom: -200px;
				transform-origin: top;
				transform: rotateX(90deg);
			}

			.xuanzhuan>img:nth-child(5) {
				transform: translateZ(100px);
			}

			.xuanzhuan>img:last-child {}
		</style>
	</head>
	<body>
			<div class="xuanzhuan">
				<img src="请输入照片地址" alt="">           放照片的地方
				<img src="请输入照片地址" alt="">
				<img src="请输入照片地址" alt="">
				<img src="请输入照片地址" alt="">
				<img src="请输入照片地址" alt="">
				<img src="请输入照片地址" alt="">
			</div>
	</body>
</html>