css实现图片的3d旋转-照片墙_css3d旋转照片墙【

作者：羊村懒王 | 2024-04-19 08:39:55

踩

css3d旋转照片墙【

一.效果图

二.图片摆放

1.html

这里准备了1个section和7个div，7个div都要求定位在父元素section那里（都在中心点），每个div各一张图，上面效果图有1张在中间的，其余6张图要在周围


<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

2.图片位置摆放-旋转

6个图片在周围，看起来就像个六边形，所以每个图都间隔60度，依次旋转就是（0° 60° 120° 180° 240° 300°）


section div:nth-of-type(1){
	transform:rotateY(0deg);
	background:url(DSC02240.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(2){
	transform:rotateY(60deg);
	background:url(DSC02249.jpg) no-repeat;
	background-size:220px 350px;
}/*其余类似*/

记得给body加上3d透视效果 perspective:1450px（3d视觉效果）

还有section加上内嵌效果 transform-style:preserve-3d（所有子元素在3D空间中呈现）

2.图片位置摆放-旋转

想象一下从上面往下看，此时图片就被内嵌在一起，像米字形一样，这时候需要让每个图片在z轴添加一个距离（旋转后方向已改变，图片正前方就是z轴的方向）

transform:translateZ(400px);

此时图片位置已经做完

三.动画效果

让大盒子section 360度无限循环的转起来


@keyframes rotations{ 
	/* 添加动画效果 */
	0%{}
	100%{
		transform:rotateY(360deg);
	}
}

动画在赋予seciton


section{
	animation:rotations 10s linear infinite;    /*infinite:无限循环*/
}

四.代码展示


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>view</title>
<style>
body{
	/*添加3d透视效果*/
	perspective:1450px;
	background-color:#000;
}
 
section{
	position:relative;
	margin:220px auto;
	width:220px;
	height:350px;
	animation:rotations 10s linear infinite;
	/*所有子元素在3D空间中呈现*/
	transform-style:preserve-3d;
}
 
section div{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
 
/*先旋转在移动*/
section div:nth-of-type(1){
	transform:rotateY(0deg) translateZ(400px);
	background:url(DSC02240.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(2){
	transform:rotateY(60deg) translateZ(400px);
	background:url(DSC02249.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(3){
	transform:rotateY(120deg) translateZ(400px);
	background:url(DSC02308.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(4){
	transform:rotateY(180deg) translateZ(400px);
	background:url(DSC02323.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(5){
	transform:rotateY(240deg) translateZ(400px);
	background:url(DSC02345.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(6){
	transform:rotateY(300deg) translateZ(400px);
	background:url(DSC02268.jpg) no-repeat;
	background-size:220px 350px;
}
section div:nth-of-type(7){
	background:url(DSC02746.JPG) no-repeat;
	background-size:220px 350px;
}
 
@keyframes rotations{ 
	/* 添加动画效果 */
	0%{}
	100%{
		transform:rotateY(360deg);
	}
}
 
section:hover{
	/* 鼠标放入动画即停止 */
	animation-play-state:paused;
}
 
section div:hover{
	box-shadow:0 0 38px #169FE6; /* 鼠标放入显示阴影 */
}
</style>
</head>
<body>
 
<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>
 
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/450851