前端之立体动画

最新推荐文章于 2024-09-10 17:45:18 发布

冥极醉醉冥极

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量89

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_19831379/article/details/119203847

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这个博客展示了一段HTML和CSS代码，用于创建一个3D翻转立方体的效果。当鼠标悬停在立方体上时，它会在X和Y轴上进行旋转，呈现出不同的颜色平面。此示例涉及CSS的transform属性，包括rotate和translate，以及preserve-3d和transition效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		
			#cube {
				margin: 200px;
				width: 300px;
				height: 300px;
				/* border: 1px dashed black; */
				font-size: 80px;
				text-align: center;
				line-height: 300px;
				/* perspective: 1000px; */
				transition: 2s;
				/* 保持3D效果 */
				transform-style: preserve-3d;
				transform: rotateY(-15deg) rotateX(-10deg);
				position: relative;
			}

			#cube:hover {
				margin: 200px;
				width: 300px;
				height: 300px;
				/* border: 1px dashed black; */
				font-size: 80px;
				text-align: center;
				line-height: 300px;
				/* perspective: 1000px; */
				transition: 2s;
				/* 保持3D效果 */
				transform-style: preserve-3d;
				transform: rotateY(165deg) rotateX(170deg);
				position: relative;
			}
						
			#cube div {
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
				transition: 2s;
				/* opacity: 0; */
			}
			
			#cube .flat1 {
				background-color: rgb(255,0,0,0.5);
				transform: translateY(-150px) rotateX(90deg);
			}
			
			#cube .flat2 {
				background-color: rgb(255,144,0,0.5);
				transform: translateY(150px) rotateX(-90deg);
			}
						
			#cube .flat3 {
				background-color: rgb(255,255,0,0.5);
				transform: translateX(-150px) rotateY(90deg);
			}
			
			#cube .flat4 {
				background-color: rgb(0,255,122,0.5);
				transform: translateX(150px) rotateY(90deg);
			}
			
			#cube .flat5 {
				background-color: rgb(0,255,255,0.5);
				transform: translateZ(-150px);
			}
			
			#cube .flat6 {
				background-color: rgb(122,111,199,0.6);
				transform: translateZ(150px);
			}
			
		</style>
	</head>
	<body>
		<div id="cube">
			<div class="flat1"></div>
			<div class="flat2"></div>
			<div class="flat3"></div>
			<div class="flat4"></div>
			<div class="flat5"></div>
			<div class="flat6"></div>
		</div>
	</body>
</html>