3D 旋转立方体的完整代码

最新推荐文章于 2024-05-13 08:00:00 发布

liliming86575513

最新推荐文章于 2024-05-13 08:00:00 发布

阅读量6.9k

点赞数 2

分类专栏：作业代码文章标签：旋转立方体的代码 3D立方体

2 篇文章 0 订阅

订阅专栏

这个效果的代码如下:

	<!doctype html>
	<html>
	<head>
	<meta charset='UTF-8'>
	<title>我的首页</title>
	<style>
	*{
	margin:0;
	padding:0;
	}
	body{
	perspective:800px;
	}
	.box{
	position:relative;
	width:200px;
	height:200px;
	margin:100px auto;
	/* background-color:pink; */
	/* transform-origin:0 0; */
	/* transform:skew(0deg,0deg); */
	transform-style:preserve-3d;/让子级元素在 3D空间占据位置/
	transition:10s;
	}
	.box:hover{
	transform:rotateX(360deg) rotateY(360deg);
	}
	.box .face{
	position:absolute;
	left:0;
	top:0;
	width:200px;
	height:200px;
	/* background-color:rgba(0,0,0,.5); */
	box-shadow:0 0 10px 0 blue inset;
	}
	.box .front{
	transform:translateZ(100px); /* z轴平移100px */
	}

	.box .behind{
	transform:rotateY(180deg) translateZ(100px); /* z轴平移100px */
	}

	.box .left{
	transform:rotateY(-90deg) translateZ(100px); /* z轴平移100px */
	}

	.box .right{
	transform:rotateY(90deg) translateZ(100px); /* z轴平移100px */
	}

	.box .top{
	transform:rotateX(90deg) translateZ(100px); /* z轴平移100px */
	}

	.box .bottom{
	transform:rotateX(-90deg) translateZ(100px); /* z轴平移100px */
	}
	</style>
	</head>
	<body>
	<div class="box">
	<div class="face top">上面</div>
	<div class="face bottom">下面</div>
	<div class="face left">左面</div>
	<div class="face right">右面</div>
	<div class="face front">前面</div>
	<div class="face behind">后面</div>
	</div>
	</body>
	</html>

代码源于课堂老师.---海文老师.

关注