css3动画效果正方体3d旋转

Super-Zuo

已于 2024-07-26 09:46:47 修改

阅读量1.3k

点赞数 2

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

于 2017-08-15 20:12:09 首次发布

本文链接：https://blog.csdn.net/qq_39244619/article/details/77199388

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

既然自己对css3有过了解，那还是意思意思一下吧！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3d旋转正方体</title>
	</head>
	<style>
		.box1{
			width: 750px;
			height: 450px;
			margin: 100px auto;
			transform: scale(0.8) translateY(-20px);  /*scale:缩放*/
		}
		.box2{
			position: relative;
			perspective: 1000px;
			animation: show1 10s linear infinite;
		}
		@keyframes show1{
			0%{transform: translate(0,0);}
			20%{transform: translate(300px,0);}
			40%{transform: translate(0,-200px);}
			60%{transform: translate(-300px,0);}
			80%{transform: translate(0,300px);}
			100%{transform: translate(0px,0);}
		}
		.box3{
			width: 600px;
			height: 600px;
			transform-style: preserve-3d;
			transform-origin: 50% 50% 150px;
			animation: rotate-frame 30s linear infinite;
		}
		.list{
			width: 300px;
			height: 300px;
			position: absolute;
		}
		.top{
			left: 150px;
			top: -150px;
			transform-origin: bottom;
			transform: rotateX(-90deg);
			background-image: url(img/icon-1.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.bottom{
			left: 150px;
			bottom: -150px;
			transform-origin: top;
			transform: rotateX(90deg);
			background-image: url(img/icon-2.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.left{
			left: -150px;
			top: 150px;
			transform-origin: right;
			transform: rotateY(90deg);
			background-image: url(img/icon-3.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.right{
			left: 450px;
			top: 150px;
			transform-origin: left;
			transform: rotateY(-90deg);
			background-image: url(img/icon-4.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.front{
			left: 150px;
			top: 150px;
			transform: translateZ(300px);
			background-image: url(img/icon-5.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.back{
			left: 150px;
			top: 150px;
			transform: translateZ(0);
			background-image: url(img/icon-6.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		@keyframes rotate-frame {
			 0% { transform: rotateX(0deg) rotateY(0deg); } 
			 10% { transform: rotateX(0deg) rotateY(180deg); } 
			 20% { transform: rotateX(-180deg) rotateY(180deg); } 
			 30% { transform: rotateX(-360deg) rotateY(180deg); } 
			 40% { transform: rotateX(-360deg) rotateY(360deg); } 
			 50% { transform: rotateX(-180deg) rotateY(360deg); } 
			 60% { transform: rotateX(90deg) rotateY(180deg); } 
			 70% { transform: rotateX(0) rotateY(180deg); } 
			 80% { transform: rotateX(90deg) rotateY(90deg); } 
			 90% { transform: rotateX(90deg) rotateY(0); } 
			 100% { transform: rotateX(0) rotateY(0); } }
	</style>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">
					<div class="top list">1</div>
				    <div class="bottom list">2</div>
				    <div class="left list">3</div>
				    <div class="right list">4</div>
				    <div class="front list">5</div>
				    <div class="back list">6</div>
				</div>
				
			</div>
		</div>
	</body>
</html>