代码如下：
xml
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
.container {
width:180px;
height:180px;
margin:100px auto;
}
.box {
perspective:500px;
position:relative;
}
.content {
width:180px;
height:180px;
transform-style:preserve-3d;
animation:run 10s infinite;
}
.face {
width:180px;
height:180px;
position:absolute;
text-align:center;
line-height:180px;
}
/*@keyframes run {
0% {
transform:rotateY(0);
}
10% {
transform:rotateY(180deg);
}
20% {
transform:rotateX(360deg);
transform:rotateY(360deg);
}
}*/
.minibox{
width: 54px;
height:54px;
border-radius: 4px;
float: left;
border:3px solid #000;
}
.divbuttons{
height:280px;
margin:10px auto;
text-align: center;
}
.button{font-size: xx-large;width: 120px;
padding: 3px;
margin: 3px;}
</style>
<script type="text/javascript">
var colors = ["green","yellow","red","blue","white","pink"];
var sidenames = ["aside","bside","cside","dside","eside","fside"];
var colordata=[];
$(function (argument) {
//初始化colordata[]
for (var i = 0; i < colors.length; i++) {
var tmp =[];
for (var j = 0; j < 9; j++) {
tmp.push(colors[i]);
}
colordata.push(tmp);
}
fillcolor2box(colordata);
//整体有个旋转角度可以让我们看到3面
$(".content").css("transform","rotateX(-30deg) rotateY(30deg) rotateZ(0deg)");
// 各面旋转拼凑正方体
$(".bside").css("transform","rotateY(-90deg) translateX(-71px) translateZ(90px)");
$(".cside").css("transform","rotateY(90deg) translateX(90px) translateZ(71px)");
$(".dside").css("transform","rotateY(180deg) translateX(17px) translateZ(161px)");
$(".eside").css("transform","rotateX(269deg) translateY(90px) translateZ(71px) ");
$(".fside").css("transform","rotateX(90deg) translateY(-71px) translateZ(90px)");
});
</script>
</head>
<body>
<div class="container">
<div class="box">
<div class="content">
<div class="aside face"> <!--魔方第一个面，类名aside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
<div class="bside face"> <!--魔方第2个面，类名bside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
<div class="cside face"> <!--魔方第3个面，类名cside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
<div class="dside face"> <!--魔方第一4个面，类名dside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
<div class="eside face"> <!--魔方第5个面，类名eside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
<div class="fside face"> <!--魔方第6个面，类名fside-->
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
<div class="minibox"></div>
</div>
</div>
</div>
</div>
<div class="divbuttons">
<input type="button" class="button" value="左正" onclick="zuoshun()" >
<input type="button" class="button" value="左逆" onclick="zuoni()">
<input type="button" class="button" value="前正" onclick="qianshun()">
<input type="button" class="button" value="前逆" onclick="qianni()">
<input type="button" class="button" value="顶正" onclick="dingshun()">
<input type="button" class="button" value="顶逆" onclick="dingni()">
</div>
</body>
</html>
<script type="text/javascript">
function dingni() {
var rotefaces=['aside','cside','dside','bside','aside']; //本次操作的4个相关面，一个顶面
var rotepos=[[0,1,2],[0,1,2],[0,1,2],[0,1,2],[0,1,2]]; //本次操作的块
var movefave = "fside"; //本次操作的4个相关面，一个顶面
var bno = "01258763"; //01258763 36785210
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
function dingshun() {
var rotefaces=['aside','bside','dside','cside','aside']; //本次操作的4个相关面，一个顶面
var rotepos=[[0,1,2],[0,1,2],[0,1,2],[0,1,2],[0,1,2]]; //本次操作的块
var movefave = "fside"; //本次操作的4个相关面，一个顶面
var bno = "36785210";
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
function zuoni() {
var rotefaces=['aside','fside','dside','eside','aside']; //本次操作的4个相关面，一个顶面
var rotepos=[[6,3,0],[6,3,0],[2,5,8],[6,3,0],[6,3,0]]; //本次操作的块
var movefave = "bside"; //本次操作的4个相关面，一个顶面
var bno = "01258763"; //01258763 36785210
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
function zuoshun() {
var rotefaces=['aside','eside','dside','fside','aside']; //本次操作的4个相关面，一个顶面
var rotepos=[[6,3,0],[6,3,0],[2,5,8],[6,3,0],[6,3,0]]; //本次操作的块
var movefave = "bside"; //本次操作的4个相关面，一个顶面
var bno = "36785210"; //01258763 36785210
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
//前逆
function qianni() {
var rotefaces=['fside','bside','eside','cside','fside']; //本次操作的4个相关面，一个顶面
var rotepos=[[8,7,6],[2,5,8],[0,1,2],[6,3,0],[8,7,6]]; //本次操作的块
var movefave = "aside"; //本次操作的4个相关面，一个顶面
var bno = "01258763"; //01258763 36785210
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
function qianshun() {
var rotefaces=['fside','cside','eside','bside','fside']; //本次操作的4个相关面，一个顶面
var rotepos=[[8,7,6],[6,3,0],[0,1,2],[2,5,8],[8,7,6]]; //本次操作的块
var movefave = "aside"; //本次操作的4个相关面，一个顶面
var bno = "36785210"; //01258763 36785210
roteall(rotefaces,rotepos,movefave,bno);
//把数据对应到格子上
fillcolor2box(colordata);
}
function roteall(rotefaces,rotepos,movefave,bno ) {
// var rotefaces=['fside','cside','eside','bside','fside']; //本次操作的4个相关面，一个顶面
// var rotepos=[[8,7,6],[6,3,0],[0,1,2],[2,5,8],[8,7,6]]; //本次操作的块
// var movefave = "aside"; //本次操作的4个相关面，一个顶面
// var bno = "36785210"; //01258763 36785210
var bn = bno.split("");// 顶面的操作是这8个格子依次前进3次 "01258763"顺时针
//为复制先存一个a面的顶上3个块颜色
var tmpcolordata = [];
for (var i = 0; i < colordata.length; i++) {
tmpcolordata.push(colordata[i].concat() ); //保存第一个数据
}
for (var i = 0; i < rotefaces.length; i++) { //4个面轮流复制，最后一个面的时候使用保存的数据
for (var j = 0; j < rotepos[i].length; j++) {
if(i<4){
colordata[sidenames.indexOf(rotefaces[i+1])][rotepos[i+1][j]] =
tmpcolordata[sidenames.indexOf(rotefaces[i])][rotepos[i][j]];
}
}
}
tmpcolordata=[];
//顶面旋转
var ci = sidenames.indexOf(movefave);
for (var i = 0; i < 2; i++) {
var tmp = colordata[ci][bn[0]]; //保存第一个数据
for (var j = 0; j < bn.length; j++) {
if(j>=bn.length-1){
colordata[ci][bn[j]]= tmp ;
}else{
colordata[ci][bn[j]]= colordata[ci][bn[j+1]] ;
}
}
}
}
//把数据对应到格子上
function fillcolor2box(colordata) {
sidenames.map(function(value,index,array) {
var k= sidenames.indexOf(value);
for (var i = 0; i < 9; i++) {
$("."+value+" div").eq(i).css("background",colordata[k][i]);
}
});
}
</script>大家可以看看效果：
点击按钮，可以变换魔方方向，如图所示：
结语
平时闲来无事可以玩一玩，提高思维敏捷程度。