HTML+CSS 实现一个立方体

最新推荐文章于 2024-07-06 13:17:42 发布

H_sChan

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量3.1k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_39942538/article/details/107445519

版权

本文详细介绍了如何利用HTML和CSS的样式规则，通过CSS3的transform属性及透视效果来创建一个具有真实感的3D立方体。内容包括立方体的各个面布局、旋转动画以及调整视角的方法，适合前端开发者学习掌握。

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

立方体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>立方体</title>
</head>
<style>
	*{
		padding: 0;margin: 0;
	}
	#cube{
		width: 300px;height: 300px;
		font-size: 80px; text-align: center;line-height: 300px;
		transition: 2s;
		transform: rotateY(-30deg)  rotateX(-35deg);
		transform-style: preserve-3d;
		margin: 300px auto;
	}
	#cube:hover{
		transform: rotateY(30deg)  rotateX(35deg);
	}
	#cube > div{
		width: 300px;height: 300px;position: absolute ;left: 0;top: 0;
		transition: 2s;opacity: 0.5;
		border: 1px dashed black;
	}
	#cube .flat1{
		background-color:red; transform: translateY(-150px) rotateX(90deg);
	}
	#cube .flat2{
		background-color:orange;transform: translateY(150px) rotateX(90deg);
	}
	#cube .flat3{
		background-color:yellow;transform: translateX(-15