C3：利用Transform（变换）和Animations（关键帧动画）实现旋转的照片墙

最新推荐文章于 2021-08-14 20:36:35 发布

鸣_c

最新推荐文章于 2021-08-14 20:36:35 发布

阅读量848

点赞数

本文链接：https://blog.csdn.net/C_755028787/article/details/105779523

版权

Animation（关键帧动画）：

属性	描述
animation：	复合属性。检索或设置对象所应用的动画特效
animation-name：	检索或设置对象所应用的动画名称
animation-duration：	检索或设置对象动画的持续时间
animation-timing-function：	检索或设置对象动画的过渡类型
animation-delay：	检索或设置对象动画延迟的时间
animation-iteration-count：	检索或设置对象动画的循环次数
animation-direction：	检索或设置对象动画在循环中是否反向运动
animation-play-state：	检索或设置对象动画的状态
animation-fill-mode：	检索或设置对象动画时间之外的状态

Transform（变换）：

属性	描述
transform	检索或设置对象的变换
transform-origin	检索或设置对象中的变换所参照的原点
transform-style	指定某元素的子元素是否位于三维空间内
perspective	指定观察者与「z=0」平面的距离
perspective-origin	指定透视点的位置
backface-visibility	指定元素背面面向用户时是否可见

具体属性的使用参照css参考手册

transform中3D坐标轴的简单理解：
在这里插入图片描述
旋转的照片墙思路：通过设置多个盒子在3D坐标轴上的位置偏移达到立体效果，通过Animations不断更改偏移量实现旋转动画，给盒子加上不同的背景图片便是一个简易的照片墙了。

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D立体照片墙</title>
	<link rel="stylesheet" type="text/css" href="css/demo2.css">
</head>
<body>
	<div class="wrapper"><!--wrapper 放置所有照片  -->
			<div class="cube">
				<!--前面-->
				<span class="front">
				</span>
				<!--后面-->
				<span class="behind">
				</span>
				<!--左面-->
				<span class="left">
				</span>
				<!--右面-->
				<span class="right">
				</span>
			</div>
	</div>
</body>
</html>

*{/*清除浏览器的缺省值*/
	margin: 0px;
	padding: 0px;
}
html{
	height: 100%;
	background-image: linear-gradient(#69e9f8 0%,#999999 80%);/*设置一个渐变背景色*/
}
.wrapper{
	width: 300px;
	margin-top: 100px;
	perspective: 1000px;/*设置景深*/
	margin: 150px auto;
}

/*定义旋转动画*/
@keyframes run{
	from{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0);
	}
	to{
		transform:  rotateY(360deg) ;
	}
}

/*初始样式，调用动画*/
.wrapper .cube{
	height: 350px;
	width: 300px;
	position: relative;
	transform-style: preserve-3d;
	animation:  run 8s infinite linear;
}
/*每个面的样式*/
.cube>span{
	display: block;
	width: 200px;
	height: 200px;
	border: 5px solid #a2e920;
	position: absolute;
	top:50px;
	left: 50px;
	opacity: 0.8;
	background-color: seashell;
}


/*设置各个面的背景图*/
.cube>span{
	background-size: 100%;
}
.cube span.front{
	background-image:url(../imgs/1.jpg);
}
.cube span.behind{
	background-image:url(../imgs/2.jpeg);
}
.cube span.left{
	background-image:url(../imgs/3.jpg);
}
.cube span.right{
	background-image:url(../imgs/4.jpg);
}

/*设置前面一面在z轴上移动*/
.cube span.front{
	transform: translateZ(130px);
}
.cube span.behind{
	transform: translateZ(-130px);
}
.cube span.left{
	transform: translateX(-130px) rotateY(90deg);
}
.cube span.right{
	transform: translateX(130px) rotateY(90deg);
}
.cube span.bottom{
	transform: translateY(130px) rotateX(90deg);
}

/*设置鼠标放在元素上 各面散开效果*/
/*过渡*/
.wrapper .cube span{
	transition: all 0.5s;
}

.wrapper:hover .cube span.front{
	/*设置正面 在z轴上移动*/
	transform: translateZ(250px);
}
.wrapper:hover .cube span.behind{
	/*设置后面 在z轴上移动*/
	transform: translateZ(-250px);
}
.wrapper:hover .cube span.left{
	/*设置左面 在z轴上移动*/
	transform: translateX(-250px) rotateY(90deg);
}
.wrapper:hover .cube span.right{
	/*设置右面 在z轴上移动*/
	transform: translateX(250px) rotateY(90deg);;
}

效果：
在这里插入图片描述
当鼠标放到照片墙上时，增大偏移量

鸣_c

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
C3：利用Transform（变换）和Animations（关键帧动画）实现旋转的照片墙

Animation（关键帧动画）：属性描述animation：复合属性。检索或设置对象所应用的动画特效animation-name：检索或设置对象所应用的动画名称animation-duration：检索或设置对象动画的持续时间animation-timing-function：检索或设置对象动画的过渡类型animation-delay：检索...
复制链接

扫一扫