【CSS3练习】3D盒子制作

最新推荐文章于 2024-04-21 11:52:04 发布

weixin_34029680

最新推荐文章于 2024-04-21 11:52:04 发布

阅读量142

点赞数

本文详细介绍了如何使用CSS3技术创建一个3D旋转盒子效果。从基本结构搭建开始，逐步介绍如何通过3D变换将六个面定位到正确位置，以及如何设置透视效果使盒子能够动态旋转。

先发个3D盒子最终效果图

在线效果预览：http://dtdxrk.github.io/game/css3-demo/box-3d.html

制作步骤1：创建基本结构

分布把6个面定义到3×3的画布上，1和4暂且是重叠的。

html结构比较简单：

	<div class="box" id="box">
		<div class="layer">1</div>
		<div class="layer">2</div>
		<div class="layer">3</div>
		<div class="layer">4</div>
		<div class="layer">5</div>
		<div class="layer">6</div>
	</div>

CSS部分：

	*{margin:0;padding:0;}

	.box{margin:50px auto;width: 300px;height: 300px; border:1px solid #ccc;position: relative;}

	.layer{background-color: #000;width: 100px;height: 100px;position: absolute;color: #fff;line-height: 100px;font-size: 50px;text-align: center;}

	.layer:nth-of-type(1){top:100px;left:100px;opacity: 0.2;}
	.layer:nth-of-type(2){top:0px;left:100px;opacity: 0.4;}
	.layer:nth-of-type(3){top:200px;left:100px;opacity: 0.6;}
	.layer:nth-of-type(4){top:100px;left:100px;opacity: 0.8;}
	.layer:nth-of-type(5){top:100px;left:0;opacity: 0.4;}
	.layer:nth-of-type(6){top:100px;left:200px;opacity: 0.4;}