css动画运用

最新推荐文章于 2023-11-08 13:09:07 发布

q_A_p

最新推荐文章于 2023-11-08 13:09:07 发布

阅读量332

点赞数

分类专栏：杂记文章标签：动画

本文链接：https://blog.csdn.net/q_A_p/article/details/53335277

版权

杂记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

外边六张图片旋转，里边4张图片也旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1-1{
				width: 200px;
				height: 250px;
				position: relative;
				margin: auto;
				animation: dong 10s linear infinite;
				transform-style: preserve-3d;/*是否保留3d效果*/
				margin-top: 100px;
			}
			.box2-1{
				width: 200px;
				height: 250px;
				position: relative;
				margin: auto;
				animation: hua 10s linear infinite;
				transform-style: preserve-3d;/*是否保留3d效果*/
				margin-top: 100px;
			}
			img{
				width: 200px;
				height: 250px;
				position: absolute;
			}
			.box1-1 img:nth-child(1){
				transform: rotateY(0deg) translateZ(200px);
			}
			.box1-1 img:nth-child(2){
				transform: rotateY(60deg) translateZ(200px);
			}
			.box1-1 img:nth-child(3){
				transform: rotateY(120deg) translateZ(200px);
			}
			.box1-1 img:nth-child(4){
				transform: rotateY(180deg) translateZ(200px);
			}
			.box1-1 img:nth-child(5){
				transform: rotateY(240deg) translateZ(200px);
			}
			.box1-1 img:nth-child(6){
				transform: rotateY(300deg) translateZ(200px);
			}
			.box2-1 img:nth-child(1){
				transform: rotateX(0deg) translateZ(120px);
			}
			.box2-1 img:nth-child(2){
				transform: rotateX(90deg) translateZ(120px);
			}
			.box2-1 img:nth-child(3){
				transform: rotateX(180deg) translateZ(120px);
			}
			.box2-1 img:nth-child(4){
				transform: rotateX(270deg) translateZ(120px);
			}
			
			@keyframes dong{
				from{transform: rotateX(0deg);}
				to{transform: rotateY(360deg);}
			}
			@keyframes hua{
				from{transform:rotateX(360deg);}
				to{transform: rotateY(0deg);}
			}
		</style>
	</head>
	<body>
		
				<div class="box1-1">
					<img src="img/teacher.jpg" />
					<img src="img/teacher.jpg" />
					<img src="img/teacher.jpg" />
					<img src="img/teacher.jpg" />
					<img src="img/teacher.jpg" />
					<img src="img/teacher.jpg" />				
					<div class="box2-1">
						<img src="img/teacher.jpg" />
						<img src="img/teacher.jpg" />
						<img src="img/teacher.jpg" />
						<img src="img/teacher.jpg" />
					</div>
				</div>
				
			
	</body>
</html>