【前端小实战】3D旋转立方体

最新推荐文章于 2024-07-28 12:05:40 发布

Fetters04

最新推荐文章于 2024-07-28 12:05:40 发布

阅读量309

点赞数 2

文章标签：前端 3d css

本文链接：https://blog.csdn.net/qq_53569667/article/details/128748443

版权

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body {
				background-color: #0093E9;
				background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%) no-repeat;
				background-size: 100vw 100vh;
			}
			
			.box {
				position: relative;
				width: 300px;
				height: 300px;
				margin: 200px auto;
				
				/* 子元素保留3D位置 */
				transform-style: preserve-3d;
				
				/* 关键帧动画 持续时间 匀速 无限执行 */
				animation: run 10s linear infinite;
			}
			
			@keyframes run {
				0% { transform: rotate3d(0, 0, 0, 0deg);}
				25% { transform: rotate3d(0, 0, 1, 90deg);}
				50% { transform: rotate3d(0, 1, 0, 180deg);}
				75% { transform: rotate3d(0, 1, 1, 270deg);}
				100% { transform: rotate3d(1, 1, 1, 0deg);}
			}
			
			.box div {
				position: absolute;
				width: 300px;
				height: 300px;
				line-height: 300px;
				font: 50px;
				text-align: center;
				border: 1px solid darkgray;
				overflow: hidden;
				
				transition: all 2s;
			}
			
			.box div img {
				width: 100%;
				height: 100%;
			}
			
			/* 将各个div旋转到对应面上，并向对应方向平移 150px*/
			.top {
				transform: rotateX(90deg) translateZ(150px);
			}
			
			.bottom {
				transform: rotateX(90deg) translateZ(-150px);
			}
			
			.left {
				transform: rotateY(90deg) translateZ(-150px);
			}
			
			.right {
				transform: rotateY(90deg) translateZ(150px);
			}
			
			.front {
				transform: translateZ(150px);
			}
			
			.back {
				transform: translateZ(-150px);
			}
			
			.box:hover .top {
				transform: rotateX(90deg) translateZ(300px);
				border-radius: 50%;
			}
			
			.box:hover .bottom {
				transform: rotateX(90deg) translateZ(-300px);
				border-radius: 50%;
			}
			
			.box:hover .left {
				transform: rotateY(90deg) translateZ(-300px);
				border-radius: 50%;
			}
			
			.box:hover .right {
				transform: rotateY(90deg) translateZ(300px);
				border-radius: 50%;
			}
			
			.box:hover .front {
				transform: translateZ(300px);
				border-radius: 50%;
			}
			
			.box:hover .back {
				transform: translateZ(-300px);
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<img src="img/rotate3D_shenli.png"/>
			</div>
			
			<div class="bottom">
				<img src="img/rotate3D_hutao.png"/>
			</div>
			
			<div class="left">
				<img src="img/rotate3D_keqing.png"/>
			</div>
			
			<div class="right">
				<img src="img/rotate3D_ying.png"/>
			</div>
			
			<div class="front">
				<img src="img/rotate3D_shenhe.png"/>
			</div>
			
			<div class="back">
				<img src="img/rotate3D_qing.png"/>
			</div>
		</div>
	</body>
</html>