css 动画（二） | 易学教程

推荐动画二

先上效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS3 3D旋转立方体动画DEMO演示</title>

<style>
	body{
		background:#eeeeee;
	}
	#view{perspective: 500px;width:200px;height:200px;margin: 200px auto;perspective-origin: 250px 100px;}
	@keyframes scroll{
		100%{
			transform: rotate3d(1,1,1,360deg);
		}
	}	
	#cube{width:200px;height:200px;position: relative; animation: scroll 2s linear 7s infinite;transform-style: preserve-3d;}
	.item{
		width: 200px;
		height:200px;
		border: 1px solid black;
		font-size:150px;
		text-align:center;
		background:yellow;
		opacity: 0.7;
		position:absolute;
	}
	@keyframes item1 {
		100%{transform: rotateY(-90deg);}
	}
	@keyframes item2 {
		100%{transform: rotateY(90deg);}
	}
	@keyframes item3 {
		100%{transform: rotateX(90deg);}
	}
	@keyframes item4 {
		100%{transform: rotateX(-90deg);}
	}
	@keyframes item5 {
		100%{transform: translateZ(200PX);}
	}
	@keyframes item6 {
		100%{transform: rotateY(180deg);}
	}
	#item1{z-index: 6;background:yellow; transform-origin: left; animation: item1 1s linear 1s both;}
	#item2{z-index: 5;background:red; transform-origin: right; animation: item2 1s linear 2s both;}
	#item3{z-index: 4;background:green; transform-origin: top; animation: item3 1s linear 3s both;}
	#item4{z-index: 3;background:blue; transform-origin: bottom; animation: item4 1s linear 4s both;}
	#item5{z-index: 2;background:silver; transform-origin: center; animation: item5 1s linear 5s both;}
	#item6{z-index: 1;background:pink; transform-origin: center; animation: item6 1s linear 6s both;}

</style>

</head>
<body>

<div id="view">
	<div id="cube">
		<div class="item" id="item1">1</div>
		<div class="item" id="item2">2</div>
		<div class="item" id="item3">3</div>
		<div class="item" id="item4">4</div>
		<div class="item" id="item5">5</div>
		<div class="item" id="item6">6</div>
	</div>
</div>
</body>
</html>

来源：CSDN

作者：weixin_43844392

链接：https://blog.csdn.net/weixin_43844392/article/details/104014763

标签

动画

动漫