3D立体照片墙—HTML

最新推荐文章于 2024-05-15 12:09:52 发布

才子新一代

最新推荐文章于 2024-05-15 12:09:52 发布

阅读量3k

点赞数 9

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_59273150/article/details/120299147

版权

文章目录

1、CSS动画样式

2、HTML图片放置

前言

首先呢，要先理解几个重要知识点，然后梳理思路，构建3d盒子模型、3d动画执行程序以及将动画应用到元素、3d动画样式等

1、css动画样式

<1>用盒子模型作为载体，将动画应用到元素，代码如下：

>>>简易分析：

动画的样式，从一种样式渐变到，另一种样式中，使用css动画，必须先为动画指定一些关键帧，目的是为了保持元素在特定的时间内，完成所设定的样式。

.box{
	width: 400px;
	height: 400px;
	margin-left: 500px;
	margin-top: 150px;
	position: relative;
	transform-style: preserve-3d;
	transform-origin: 200px 200px 200px;
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	animation-name: kuli;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	# animation: kuli 10s ease infinite;
}

>>>代码包含几个重要知识点：

    /* 设置被嵌套元素以3D样式显示 */
	transform-style: preserve-3d;
	
	/* 设置3D元素的位置 */
	transform-origin: 200px 200px 200px;
	
	/* 通过rotate()方法，3D元素围绕着X、Y、Z轴给定的度数进行旋转 */
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	
	/* 设置3d动画执行名称 */
	animation-name: kuli;
	
	/* 指定动画完成一个循环需要多长时间 */
	animation-duration: 10s;
	
	/* infinite 设置动画永远运行（如死循环） */
	animation-iteration-count: infinite;
	
	/* ease 指定动画的速度曲线	慢>快>慢 */
	/* linear 指定从开始到结束具有相同速度的动画效果（匀速变化） */
    /* 下面的样式 ease 可以换为 linear */
	# animation: kuli 10s ease infinite;

<2>@keyframes动画代码，代码如下：

>>>简易分析：

@keyframes：在指定css样式中，动画在特定的时间内，是从一种样式渐变为另一种样式，在这渐变之前，要先使动画生效，即必须将动画绑定到所属元素当中，在代码当中将 “kuli”动画绑定到元素，动画是持续10秒，当动画完成20%、40%、60%、80%时围绕着x、y、z轴改变旋转度数，直到100%时，再次更改，并重复

@keyframes kuli{
	0%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	20%{
		transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
	}
	40%{
		transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);
	}
	60%{
		transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);
	}
	80%{
		transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);
	}
	100%{
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}

<3>标签样式及图片样式，代码如下：


.box div{
	width: 400px;
	height: 400px;
	position: absolute;
}
.box div img{
	width: 400px;
	height: 400px;
	/* 行内元素垂直方向的对齐，注意区别于块元素垂直方向的对齐 */
	vertical-align: top;
}


.box div:nth-child(2){
	transform-origin: 0 0;
	transform: rotateY(-90deg);
}
.box div:nth-child(3){
	/* 被转换3D元素的位置 */
	transform-origin: 400px 0;
	transform: rotateY(90deg);
}
.box div:nth-child(4){
	transform-origin: 0 0;
	transform: rotateX(90deg);
}
.box div:nth-child(5){
	transform-origin: 0 400px;
	transform: rotateX(-90deg);
}
.box div:nth-child(6){
	/* 转换属性，定义3D转化，仅用于Z轴 */
	transform: translateZ(400px);
}

2、html图片放置

* 注意图片的放置，自己可以选择所喜欢的类型，放在文件夹所创建的目录里面即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d正方体立体照片墙</title>
		<link rel="stylesheet" href="css/box.css">
	</head>
	<body>
		<div class="box">
			<div><img src="img/01.jpg" alt=""></div>
			<div><img src="img/02.jpg" alt=""></div>
			<div><img src="img/03.jpg" alt=""></div>
			<div><img src="img/04.jpg" alt=""></div>
			<div><img src="img/05.jpg" alt=""></div>
			<div><img src="img/06.jpg" alt=""></div>
		</div>
	</body>
</html>

>>>整体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d立体照片墙</title>
		<style type="text/css">
			/* 用盒子模型作为载体，将动画应用到元素 */
			.box{
				width: 400px;
				height: 400px;
				margin-left: 500px;
				margin-top: 150px;
				position: relative;
				transform-style: preserve-3d;
				transform-origin: 200px 200px 200px;
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				animation-name: kuli;
				animation-duration: 10s;
				animation-iteration-count: infinite;
				animation: kuli 10s ease infinite;
			}
			/* @keyframes动画代码 */
			@keyframes kuli{
				0%{
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}
				20%{
					transform: rotateX(180deg) rotateY(90deg) rotateZ(0deg);
				}
				40%{
					transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);
				}
				60%{
					transform: rotateX(360deg) rotateY(270deg) rotateZ(180deg);
				}
				80%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(270deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			
			.box div{
				width: 400px;
				height: 400px;
				position: absolute;
			}
			.box div img{
				width: 400px;
				height: 400px;
				/* 行内元素垂直方向的对齐，注意区别于块元素垂直方向的对齐 */
				vertical-align: top;
			}
			
			
			.box div:nth-child(2){
				transform-origin: 0 0;
				transform: rotateY(-90deg);
			}
			.box div:nth-child(3){
				/* 被转换3D元素的位置 */
				transform-origin: 400px 0;
				transform: rotateY(90deg);
			}
			.box div:nth-child(4){
				transform-origin: 0 0;
				transform: rotateX(90deg);
			}
			.box div:nth-child(5){
				transform-origin: 0 400px;
				transform: rotateX(-90deg);
			}
			.box div:nth-child(6){
				/* 转换属性，定义3D转化，仅用于Z轴 */
				transform: translateZ(400px);
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div><img src="img/01.jpg" alt=""></div>
			<div><img src="img/02.jpg" alt=""></div>
			<div><img src="img/03.jpg" alt=""></div>
			<div><img src="img/04.jpg" alt=""></div>
			<div><img src="img/05.jpg" alt=""></div>
			<div><img src="img/06.jpg" alt=""></div>
		</div>
	</body>
</html>

才子新一代

关注

9
点赞
踩
61

收藏

觉得还不错? 一键收藏
0
评论
3D立体照片墙—HTML

文章目录 1、CSS动画样式 2、HTML图片放置前言首先呢，要先理解几个重要知识点，然后梳理思路，构建3d盒子模型、3d动画执行程序以及将动画应用到元素、3d动画样式等1、css动画样式 <1>用盒子模型作为载体，将动画应用到元素，代码如下： >>>简易分析：动画的样式，从一种样式渐变到，另一种样式中，使用css动画，必须先为动画指定一些...
复制链接

扫一扫