HTML、CSS制作旋转正方形立体

最新推荐文章于 2024-07-25 14:15:14 发布

꧁༺My ོ♬℘Skyོꦿ༊༻꧂

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量514

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_53430678/article/details/128078451

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.main{
				width: 200px;
				height: 200px;
				perspective: 800px;	/*给最大盒子设置景深，实现近大远小的视觉*/
				margin:200px auto;	/*调整整个盒子位置尽量居中*/
			}
			.box {
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				/* 将盒子变成3d舞台 */
				position: relative;
				animation: run 6s linear infinite;
				/* 使用关键帧动画 ,一直动 */
				
			}

			.box>div {
				width: 200px;
				height:200px;
				text-align: center;
				line-height: 200px;
				/* 行高等于盒子高度,文字垂直居中 */
				font-size: 50px;
				opacity: 0.5;
				/* 透明度 */
				position: absolute;		/*父盒子相对定位，子盒子绝对定位*/
			}

			/*结构性伪类选择器 选择元素*/
			.box>div:nth-child(1) {
				/* 调整上面位置 */
				background: lightcoral;
				transform: translateY(-100px) rotateX(90deg);
			}

			.box>div:nth-child(2) {
				/* 调整左面位置及设置颜色 */
				background: lightcyan;	
				transform: translateX(-100px) rotateY(-90deg); 
			}

			.box>div:nth-child(3) {
				/* 背面 */
				background: lightgray;
				transform:translateZ(-100px) ;
			}

			.box>div:nth-child(4) {
				/* 右面 */
				background: lightsalmon;
				transform: translateX(100px) rotateY(90deg);
			}

			.box>div:nth-child(5) {
				/* 底面 */
				background: lightgoldenrodyellow;
				transform: translateY(100px) rotateX(-90deg);
			}

			.box>div:nth-child(6) {
				/* 调整正面位置及设置颜色 */
				background: lime;
				transform: translateZ(100px);
			}

			.box:hover {
				/* 鼠标悬停在盒子时，停止运动*/
				animation-play-state: paused;
			}

			/*创建关键帧动画*/
			@keyframes run {
				from {
					transform: rotate3d(0);	
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
		</style>
		<script>

		</script>
	</head>
	<body>
		<div class="main">
			<div class="box">
				<div>
					上面
				</div>
				<div>
					左面
				</div>
				<div>
					背面
				</div>
				<div>
					右面
				</div>
				<div>
					底面
				</div>
				<div>
					正面
				</div>
			</div>
		</div>
	</body>
</html>