3d相册

最新推荐文章于 2023-03-03 18:07:56 发布

water_java

最新推荐文章于 2023-03-03 18:07:56 发布

阅读量458

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/water_java/article/details/106678231

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

页面脚本

我的图片是是本地的，大家可以放上自己喜爱的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3d相册</title>
	</head>
	<style>
		#box1 {
			/* 宽 */
			width: 300px;
			/* 高 */
			height: 300px;
			/* 边框 */
			border: 1px solid black;
			/* 外间距 */
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			/* 算上边框间距 */
			box-sizing: border-box;
			/* 视距 */
			perspective: 1200px;
			
			
		}

		#box2 {
			border: 1px solid red;
			width: 300px;
			height: 300px;
			/* 保存子盒子中的样式 */
			transform-style: preserve-3d;
			/* 执行动画 动画名，效果时间，延迟时间，匀速，无限期旋转*/
			
			animation: im 5s 1s linear infinite;
			
			
		}

		body {
			/* 整体背景图 */
		background-image: url(img/1.jpg);
		background-size: auto;
		
		}
		
		img {
			
			border: 1px solid transparent;
			width: 300px;
			height:300px;
			/* 绝对定位 */
			position: absolute;
	/*粗细算入宽和高中*/
				box-sizing: border-box;
				/*渐变效果 时长 延迟时间*/
				transition: transform 1s 0.5s;	
		}
		/* 定义动画 */
		@keyframes im{
			/* 开始时样式 */
			from{
				transform: rotateY(0deg);
			}
			/* 结束时样式 */
			to{
				transform: rotateY(360deg);
			}
		}
		/* 图片角度 旋转与位移*/
		#i1{
			transform: rotateY(0deg) translate3d(0px,0px,300px);
		}
		#i2{
			transform: rotateY(60deg) translate3d(0px,0px,300px);
		}
		#i3{
			transform: rotateY(120deg) translate3d(0px,0px,300px);
		}
		#i4{
			transform: rotateY(180deg) translate3d(0px,0px,300px);
		}
		#i5{
			transform: rotateY(240deg) translate3d(0px,0px,300px);
		}
		#i6{
			transform: rotateY(300deg) translate3d(0px,0px,300px);
		}
		
		#box2:hover{
				/*鼠标移上去就停下*/
				animation-play-state: paused;
		}
		
			/*放大倍数 scale*/
		#i1:hover{
			transform: rotateY(0deg) translate3d(0px,0px,300px) scale(1.25);
		}
		#i2:hover{
			transform: rotateY(60deg) translate3d(0px,0px,300px) scale(1.25);
		}
		#i3:hover{
			transform: rotateY(120deg) translate3d(0px,0px,300px) scale(1.25);
		}
		#i4:hover{
			transform: rotateY(180deg) translate3d(0px,0px,300px) scale(1.25);
		}
		#i5:hover{
			transform: rotateY(240deg) translate3d(0px,0px,300px) scale(1.25);
		}
		#i6:hover{
			transform: rotateY(300deg) translate3d(0px,0px,300px) scale(1.25);
		}
		</style>
	<body>
		<div id="box1">
			<div id="box2">
				<img src="img/q1.png" id="i1"/>
				<img src="img/q2.jpg" id="i2"/>
				<img src="img/q3.jpg" id="i3"/>
				<img src="img/q1.png" id="i4"/>
				<img src="img/q2.jpg" id="i5"/>
				<img src="img/q3.jpg" id="i6"/>
			</div>
		</div>
	</body>
</html>

效果
在这里插入图片描述

在这里插入图片描述

water_java

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
3d相册

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3d相册</title> </head> <style> #box1 { /* 宽 */ width: 300px; /* 高 */ height: 300px; /* 边框 */ border: 1px solid black;
复制链接

扫一扫