制作3D魔方

代号:码农

于 2022-12-27 13:22:33 发布

阅读量158

点赞数

文章标签： 3d css css3

本文链接：https://blog.csdn.net/2201_75624160/article/details/128454659

版权

<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100vw;
				height: 100vh;
				display: flex;
				transform-style: preserve-3d;
				animation: identifier 10s linear;
				justify-content: center;
				align-items: center;
			}
			div{
				width: 300px;
				height: 300px;
				position: absolute;
			}
			.top{
				transform: rotateX(90deg) translateZ(150px);
			}
			.bottom{
				transform: rotateX(-90deg) translateZ(150px);
			}
			.left{
				transform: rotateY(-90deg) translateZ(150px);
			}
			.right{
				transform: rotateY(90deg) translateZ(150px);
			}
			.after{
				transform: rotateY(180deg) translateZ(150px);
				
			}
			.before{
				transform:rotateY(0deg) translateZ(150px);
			}
			@keyframes identifier {
				0%{
					transform: rotateY(0deg) rotateX(0deg);
				}
				100%{
					transform: rotateY(360deg) rotateX(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="top"><img src="img/20210805_165143.jpg" width="300px" height="300px"/></div>
		<div class="bottom"><img src="img/20211006_142350.jpg" width="300px" height="300px"/></div>
		<div class="left"><img src="img/20220406_005106.jpg" width="300px" height="300px"/></div>
		<div class="right"><img src="img/20220618_121223.jpg" width="300px" height="300px"/></div>
		<div class="after"><img src="img/20220618_121557.jpg" width="300px" height="300px"/></div>
		<div class="before"><img src="img/80ee22d910981c40bf04b891e3ec40f90fb79868_raw.jpg" width="300px" height="300px"/></div>
	</body>