<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
color: yellow;
margin: 100px auto;
position: relative;
transform-style:preserve-3d;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
#box table{
position: absolute;
width: 100%;
height: 100%;
border-collapse: collapse;
border: 1px solid #191919;
}
#box .front{
background-color: rgb(186,0,0);
transform: translateZ(150px);
}
#box .back{
background-color: #17a92a;
transform: translateZ(-150px);
}
#box .left{
background-color: #e4e4e4;
transform: translate(-150px, 0) rotateY(-90deg);
}
#box .right{
background-color: #e4a219;
transform: translate(150px, 0) rotateY(90deg);
}
#box .up{
background-color: #1319a7;
transform: translate(0,-150px) rotateX(90deg);
}
#box .down{
background-color: #a70e82;
transform: translate(0,150px) rotateX(-90deg);
}
</style>
</head>
<body>
<div id="box">
<table class="front" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="back" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="left" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="right" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="up" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="down" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script>
var oBox=document.getElementById('box');
var l=0;
var t=0;
oBox.οnmοusedοwn=function (ev){
var oldX=ev.clientX-l;
var oldY=ev.clientY-t;
document.οnmοusemοve=function (ev){
l=ev.clientX-oldX;
t=ev.clientY-oldY;
oBox.style.transform='perspective(800px) rotateX('+-t/5+'deg) rotateY('+l/5+'deg)';
};
document.οnmοuseup=function (){
document.οnmοusemοve=null;
};
return false;
};
</script>
</body>
</html>
HTML魔方
最新推荐文章于 2024-01-26 15:26:18 发布