一、案例效果图
效果图是最能表明一个事务的结果性 也能第一时间了解到我们要达成的目的
二、魔方的思路
1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。
2、我们需要将每一个面旋转到相应的位置上,每一个面的旋转轴都是不一样的。上下,左右,分别对应的旋转轴,以及旋转角度分别是:bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候,旋转轴为Z轴,并不是上下,左右边。浏览器上面的坐标系是这样的:Z轴是屏幕里外两个方向(向外为正,向里为负),X轴的水平方向(向右为正,向左为负);
3、接下来还有一个关键的步骤,就是当变换导致元素在 3D 空间中旋转时,指定当元素背面朝向观察者时不可见;
4、接下来我们要做的就是设置一下所处环境,我们要设置成3D的环境,具体的语法形式如下:transform-style: preserve-3d;
5、然后我们为了让立方体旋转起来,以便更好的实现3D效果。首先找到旋转中心,在3D魔方中,旋转中心就是立方体的几何中心。
三、魔方实现目录
从上面的目录也不难看出 我们所需要的一些公共的js和css文件还是挺多的 在此我就不一一列举了 需要的可以 前往传送门获取测试 传送门
四、魔方核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Rubik’s Cube">
<meta name="keywords" content="Erno Rubik’s Cube">
<link rel="stylesheet" type="text/css" href="css/cube.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="icon" type="image/png" href="img/cuber-favicon-0064x0064.png">
<link rel="apple-touch-icon" href="img/cuber-favicon-0144x0144.png">
<title>Cuber</title>
<script charset="utf-8" src="js/tween.min.js"></script>
<!-- Three.js -->
<script charset="utf-8" src="js/Three.js"></script>
<script charset="utf-8" src="js/EventDispatcher.js"></script>
<script charset="utf-8" src="js/Math.js"></script>
<script charset="utf-8" src="js/Quaternion.js"></script>
<script charset="utf-8" src="js/Vector2.js"></script>
<script charset="utf-8" src="js/Vector3.js"></script>
<script charset="utf-8" src="js/Box3.js"></script>
<script charset="utf-8" src="js/Sphere.js"></script>
<script charset="utf-8" src="js/Euler.js"></script>
<script charset="utf-8" src="js/Matrix3.js"></script>
<script charset="utf-8" src="js/Matrix4.js"></script>
<script charset="utf-8" src="js/Object3D.js"></script>
<script charset="utf-8" src="js/Camera.js"></script>
<script charset="utf-8" src="js/PerspectiveCamera.js"></script>
<script charset="utf-8" src="js/Ray.js"></script>
<script charset="utf-8" src="js/Plane.js"></script>
<!-- Here are the Cube guts. Enjoy. -->
<script charset="utf-8" src="js/ERNO.js"></script>
<script charset="utf-8" src="js/CSS3DRenderer.js"></script>
<script charset="utf-8" src="js/utils.js"></script>
<script charset="utf-8" src="js/Number.js"></script>
<script charset="utf-8" src="js/String.js"></script>
<script charset="utf-8" src="js/Array.js"></script>
<script charset="utf-8" src="js/colors.js"></script>
<script charset="utf-8" src="js/directions.js"></script>
<script charset="utf-8" src="js/queues.js"></script>
<script charset="utf-8" src="js/twists.js"></script>
<script charset="utf-8" src="js/cubelets.js"></script>
<script charset="utf-8" src="js/groups.js"></script>
<script charset="utf-8" src="js/slices.js"></script>
<script charset="utf-8" src="js/folds.js"></script>
<script charset="utf-8" src="js/projector.js"></script>
<script charset="utf-8" src="js/interaction.js"></script>
<script charset="utf-8" src="js/controls.js"></script>
<script charset="utf-8" src="js/cubes.js"></script>
<script charset="utf-8" src="js/solvers.js"></script>
<script charset="utf-8" src="js/renderer.js"></script>
<script charset="utf-8" src="js/jquery.js"></script>
<script charset="utf-8" src="js/iecss3d.js"></script>
<script charset="utf-8" src="js/ierenderer.js"></script>
<script charset="utf-8" src="js/locked.js"></script>
<script charset="utf-8" src="js/deviceMotion.js"></script>
<script charset="utf-8" src="js/main.js"></script>
</head>
<body class="graydient">
<div id="container"></div>
<div id="fail">
<h1>Sorry,</h1>
<h2>Cubers broken</h2>
</div>
</body>
</html>