3D动画旋转木马案例

最新推荐文章于 2024-07-25 10:45:42 发布

鹿其其鹿

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量145

点赞数

分类专栏： Web案例文章标签： 3d css3 css

本文链接：https://blog.csdn.net/qq_45478564/article/details/126904830

版权

Web案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		body{
			perspective: 1000px;
			
		}
		section{
			position: relative;
			width: 300px;
			height: 300px;
			margin: 150px auto;
			transition: all 4s;
			transform-style: preserve-3d;
			animation: rotate 5s infinite forwards linear;
			background: url("sheep.jpg") no-repeat;
		}
		@keyframes rotate {
			0%{
				transform: rotateY(0);
			}
			100%{
				transform: rotateY(360deg);
			}
		}
		section:hover{
			/*光标暂停*/
			animation-play-state:paused;
		}
		section>div{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: url("gudong.jpg") no-repeat;
		}
		section div:nth-child(1){
			transform:rotateY(0) translateZ(300px) ;
		}
		section div:nth-child(2){
			transform:rotateY(60deg) translateZ(300px) ;
		}
		/*每个盒子加60度*/
		section div:nth-child(3){
			 transform:rotateY(120deg) translateZ(300px) ;
		 }
		section div:nth-child(4){
			transform:rotateY(180deg) translateZ(300px) ;
		}
		section div:nth-child(5){
			transform:rotateY(240deg) translateZ(300px) ;
		}
		section div:nth-child(6){
			transform:rotateY(300deg) translateZ(300px) ;
		}
		
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>