Html设计小技巧之可旋转立方体效果
1. 效果展示
2.代码展示
CSS代码:
body{
background-color: black;
margin: 0;
}
#cube{
position: absolute;
left: 52%;
top: 416px;
width: 208px;
height: 208px;
transform: translate(-50%, -50%);
}
.cubeSide{
position: absolute;
height: 208px;
width: 208px;
top: 0;
left: 0;
transform-origin: 104px 104px 104px;
transition: transform 0.5s;
}
#c1{
background-image: url("../image/grass_block_top.png");
transform: rotateX(-45deg) rotateY(0deg) rotateZ(45deg);
}
#c2{
background-image: url("../image/grass_block_side.png");
transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
}
#c3{
background-image: url("../image/grass_block_side.png");
transform: rotateX(45deg) rotateY(135deg) rotateZ(0deg);
}
#c4{
background-image: url("../image/grass_block_side.png");
transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);
}
#c5{
background-image: url("../image/grass_block_side.png");
transform: rotateX(45deg) rotateY(-135deg) rotateZ(0deg);
}
#c6{
background-image: url("../image/dirt.png");
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}
#controlBoard{
position: absolute;
top: 728px;
left: 52%;
transform: translate(-52%, -52%);
}
JS代码:
let cube = document.getElementsByClassName("cubeSide");
let array = [
[-45, 0, 45],
[45, -135, 0],
[45, -45, 0],
[45, 135, 0],
[45, 45, 0],
[-45, 0, 45]
];
function turnToLeft(){
array[0][2]+=90;
array[5][2]+=90;
array[1][1]+=90;
array[2][1]+=90;
array[3][1]+=90;
array[4][1]+=90;
show();
}
function turnToRight(){
array[0][2]-=90;
array[5][2]-=90;
array[1][1]-=90;
array[2][1]-=90;
array[3][1]-=90;
array[4][1]-=90;
show();
}
function show(){
for(let i = 0; i < cube.length; i += 1) {
cube[i].style.transform=
"rotateX(" + array[i][0] +
"deg) rotateY(" + array[i][1] +
"deg) rotateZ(" + array[i][2] +
"deg)";
}
}
let lastx,nowx,ifTimer=false;
document.getElementById("cube").onmousemove=function(e){
nowx=e.clientX;
if(!ifTimer){
ifTimer = true;
lastx = nowx;
setTimeout(function(){
let dx = nowx - lastx;
if(dx > 100){turnToRight();}
if(dx < -100){turnToLeft();}
ifTimer = false;
}, 200);
}
}
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Colorful Cube</title>
<link rel="stylesheet" href="css/003.css">
</head>
<body>
<div id="cube">
<div class="cubeSide" id="c6"></div>
<div class="cubeSide" id="c5"></div>
<div class="cubeSide" id="c4"></div>
<div class="cubeSide" id="c3"></div>
<div class="cubeSide" id="c2"></div>
<div class="cubeSide" id="c1"></div>
</div>
<div id="controlBoard">
<button onclick="turnToLeft()">←</button>
<button onclick="turnToRight()">→</button>
</div>
</body>
<script src="js/003.js"></script>
</html>