以正方体一个顶点进行旋转的3D立方体动画

最新推荐文章于 2023-09-21 00:09:39 发布

GJF_blog

最新推荐文章于 2023-09-21 00:09:39 发布

阅读量629

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/GJF_blog/article/details/118608689

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转的立方体</title>
	</head>
	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		/* 给每个div设置宽高，水平垂直居中 */
		.container,
		.container .outer,
		.container .inner,
		.container .inner div{
			width: 10rem;
			height: 10rem;
			font-size: 1.8rem;
			text-align: center;
			line-height: 10rem;
            
		}
		/* 设置container的旋转效果，取名为roate_y,4秒、线性变化、无线循环 */
		.container{
			margin: 0 auto;
			animation: roate_y 4s linear infinite;
			transform-style: preserve-3d;
		}
		/* 立方体以Y轴为中心，旋转360度 之后每4s重复*/
		@keyframes roate_y{
			from{transform: rotateY(0);}
			to{transform: rotateY(360deg);}
		}
		/* 将正着面对我们的立方体绕X轴旋转55度
		 * 即本来“下”有4个点在水平，旋转后只有两个点在下面
		 */
		.container .outer{
			transform-style: preserve-3d;
			transform: rotateX(55deg);
		}
		/*  在上面的基础上绕Y轴旋转，最后“下”只有一个点在下面，
		 * 也就我们看到立方体的一个点支撑起整个立方体的效果
		 */
		.container .inner{
			transform-style: preserve-3d;
			transform: rotateY(45deg);
			position: relative;
		}
		.container .inner div{
			transform-style: preserve-3d;
			position: absolute;
            opacity: 0.5;
		}
		
		/* 单独设置每个面的旋转角度 */
		.container .plane-1{
			/* 设置右向右移-80px，并绕Y轴旋转90度，我们看到的效果是一条竖线“|”，
			*  因为后面的面积被“|”挡住了，下面的每个面同理。
			* 即每个面初始是面对我们的，即“口”，然后我们需要对齐进行旋转和移动得到正方体的每个面
			*/
			background: rgba(127,127,255,0.3);
			right: -5rem;
			transform: rotateY(90deg);
		}
		.container .plane-2{
			background: rgba(127,255,255,0.3);
			left: -5rem;
			transform: rotateY(90deg);
		}
		.container .plane-3{
			background: rgba(127,255,255,0.3);
			transform: translateZ(-5rem);
		}
		.container .plane-4{
			background: rgba(0,255,255,0.3);
			transform: translateZ(5rem);
		}
		.container .plane-5{
			background: rgba(0,225,127,0.3);
			transform: rotateX(-90deg);
			bottom: -5rem;
		}
		.container .plane-6{
			background: rgba(127,127,127,0.3);
			transform: rotateX(-90deg);
			top: -5rem;
		}
        img{
            width: 10rem;
			height: 10rem;
        }
	</style>
	<body>
		<br><br><br><br><br>
		<div class="container">
			<div class="outer">
				<div class="inner">
					<div class="plane-1"><img src="./images/1.png" alt="" /></div>
					<div class="plane-2"><img src="./images/2.png" alt="" /></div>
					<div class="plane-3"><img src="./images/3.png" alt="" /></div>
					<div class="plane-4"><img src="./images/4.png" alt="" /></div>
					<div class="plane-5"><img src="./images/5.png" alt="" /></div>
					<div class="plane-6"><img src="./images/6.png" alt="" /></div>
				</div>
			</div>
		</div>
	</body>
</html>