小Lemon教学 *HTML代码写魔方网页* 玩玩更开心-优快云博客

本文链接：https://blog.youkuaiyun.com/Good_Lemon_boy/article/details/104521333

这篇博客通过HTML5和CSS3技术，教你如何创建一个3D魔方网页。利用CSS的径向渐变背景、绝对定位和转换样式实现魔方的外观，再结合JavaScript的jQuery库，实现实时旋转和交互效果，让你在玩乐中学习前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容：

魔方

***样式*** @CHARSET "UTF-8"; *{padding:0;margin:0;}

html{
background: -webkit-radial-gradient(center,farthest-corner,red,black);
height:100%;

}
#box{
position:absolute;
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
-webkit-transform-style:preserve-3d;
-webkit-perspective:800px;
}
#cube{
width:100px;
height:100px;
margin:100px auto;
-webkit-transform-style:preserve-3d;
-webkit-transition:0.5s ease all;
-webkit-transform:rotateX(-30deg) rotateY(-30deg);
}
#cube li{
display:block;
position:absolute;
width:98px;
height:98px;
border:1px solid black;
-webkit-transform-style:preserve-3d;
-webkit-transition:0.5s ease all;
-webkit-user-select:none;
z-index:10;
}
#front,#back,#left,#right,#top,#bottom{
-webkit-transform-style:preserve-3d;
-webkit-transition:0.5s ease all;
}
js
$(document).ready(function(){
var surface=new Array();
var facediv="";
var mx; //x方向位移
var my; //y方向位移
var rox=-30;
var roy=-30;
var sfid; //鼠标点击魔方的位置
/**
* 初始化魔方六个面，包括颜色，位置
*/
for(var i=1;i<=6;i++){
surface[i]=new Array();
for(var j=1;j<=9;j++){
surface[i][j]=new Array();
for(var k=1;k<=2;k++){
surface[i][j][k]="";
}
}
}

for(var i=1;i<=6;i++){
	for(var j=1;j<=9;j++){
		switch(i){
		case 1:
			surface[i][j][1]="blue";
			break;
		case 2:
			surface[i][j][1]="lime";
			break;
		case 3:
			surface[i][j][1]="red";
			break;
		case 4:
			surface[i][j][1]="yellow";
			break;
		case 5:
			surface[i][j][1]="white";
			break;
		case 6:
			surface[i][j][1]="#FFB416";
			break;
		
		}
	}
}
/**
 * 每个大面的位置
 */
local();
function local(){
for(var i=1;i<=6;i++){
	for(var j=1;j<=9;j++){
		switch(i){
		case 1:
			surface[i][j][2]="rotateY(0deg)";
			break;
		case 2:
			surface[i][j][2]="rotateY(180deg)";
			break;
		case 3:
			surface[i][j][2]="rotateY(-90deg)";
			break;
		case 4:
			surface[i][j][2]="rotateY(90deg)";
			break;
		case 5:
			surface[i][j][2]="rotateX(90deg)";
			break;
		case 6:
			surface[i][j][2]="rotateX(-90deg)";
			break;
		
		}
	}
}
/**
 * 每个面子方块的位置
 */
for(var i=1;i<=6;i++){
	surface[i][1][2] +="translateX(-100px) translateY(-100px)";
	surface[i][2][2] +="translateX(0px) translateY(-100px)";
	surface[i][3][2] +="translateX(100px) translateY(-100px)";
	surface[i][4][2] +="translateX(-100px) translateY(0px)";
	surface[i][5][2] +="translateX(0px) translateY(0px)";
	surface[i][6][2] +="translateX(100px) translateY(0px)";
	surface[i][7][2] +="translateX(-100px) translateY(100px)";
	surface[i][8][2] +="translateX(0px) translateY(100px)";
	surface[i][9][2] +="translateX(100px) translateY(100px)";
	
}}
/**
 * 一个div就是一个面，一个li就是一个格子
 */
htmldiv();
function htmldiv(){
	facediv="";
for(var i=1;i<=6;i++){
	for(var j=1;j<=9;j++){
		if(j==1){
		switch(i){
		case 1:facediv +='<div id="front">';
			break;
		case 2:facedi