3D旋转立方体效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41995919/article/details/103674586

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.lb-wrapper{
				position: relative;
				margin: auto;
				margin-top: 100px;
				width: 210px;
				height:100px;
				perspective: 800px;
				/*border: 1px solid #ccc;*/
			}
			.lb-main{
				position: absolute;
				width: 100%;
				height: 100%;
				/*background-color: aquamarine;*/
				transform-style: preserve-3d;
				/*transform: translateZ(-288px) rotateX(0deg) rotateY(0deg);*/
				transform: translateZ(-80px) rotateX(0deg) rotateY(0deg);
				font-size: 40px;
				color: white;
				text-align: center;
				transition: 1s;
				 /* 动画名称 动画时长 延时时间 匀速 无限循环 逆播 */ 
				animation: move 25s 0.2s linear infinite alternate;
			}
			.lb-main figure{
				width: 100%;
				height: 100%;
				position: absolute;
				transform-style: preserve-3d;
				border: 2px solid black;
			}
			.lb-main figure:nth-of-type(1){
				background-color: firebrick;
				transform: rotateY(0deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(2){
				background-color: lawngreen;
				transform:rotateY(40deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(3){
				background-color: lightcoral;
				transform:rotateY(80deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(4){
				background-color: coral;
				transform:rotateY(120deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(5){
				background-color: fuchsia;
				transform:rotateY(160deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(6){
				background-color: lightcoral;
				transform:rotateY(200deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(7){
				background-color: brown;
				transform:rotateY(240deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(8){
				background-color: turquoise;
				transform:rotateY(280deg) translateZ(288px) scale(0.95);
			}
			.lb-main figure:nth-of-type(9){
				background-color: orange;
				transform:rotateY(320deg) translateZ(288px) scale(0.95);
			}
			
			@keyframes move{
				0%{
					transform: translateZ(-80px) rotateY(360deg);
				}
				100%{
					transform: translateZ(-80px) rotateY(0deg);
				}
			}
			
		</style>
	</head>
	<body>
		<div class="lb-wrapper">
			<div class="lb-main">
				<figure>1</figure>
				<figure>2</figure>
				<figure>3</figure>
				<figure>4</figure>
				<figure>5</figure>
				<figure>6</figure>
				<figure>7</figure>
				<figure>8</figure>
				<figure>9</figure>
			</div>
		</div>
	</body>
</html>

详情和原理：