近期在项目中做了一个立体翻页的效果，写一个小demo来记录一下
看一下最终的效果。丑的话求不要吐槽我，我知道我的美感有待提高(๑*◡*๑)
完整代码在最后面
效果预览
直接开干：
首先是页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html cube</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="cube" id="cube">
<span class="cube-side front">front</span>
<span class="cube-side up">up</span>
<span class="cube-side down">down</span>
<span class="cube-side left">left</span>
<span class="cube-side right">right</span>
<span class="cube-side back">back</span>
</div>
</body>
</html>
这里我用了一个div来当容器，代表这个方块的整体，在里面给了6个span分别对应着方块的6个面。
为了方便写样式，我给了各个面一个class：
- front代表前面
- back代表后面
- up是上面
- down是下面
- left是
至此结构以及写的差不多，我们开始给这些结构加点样式
.cube {
display: block;
position: relative;
margin: 200px auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(45deg) rotateZ(0deg);
}
.cube-side {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
}
.cube-side.up {
background: #f00;
transform: rotateX(90deg) translateZ(50px);
}
.cube-side.down {
background: #0f0;
transform: rotateX(-90deg) translateZ(50px);
}
.cube-side.left {
background: #00f;
transform: rotateY(-90deg) translateZ(50px);
}
.cube-side.right {
background: #f0f;
transform: rotateY(90deg) translateZ(50px);
}
.cube-side.front {
background: #0ff;
transform: translateZ(50px);
}
.cube-side.back {
background: #ff0;
transform: translateZ(-50px) rotateY(180deg);
}
效果就出来了
为了让方块动起来，需要js来控制方块的样式，我们先在结构中添加一下滑块开关。嗯，顺便写点样式居中下：
<div class="control" style="text-align: center">
<input type="range" id="controlX" min="-180" max="180">
<input type="range" id="controlY" min="-180" max="180">
<input type="range" id="controlZ" min="-180" max="180">
</div>
<input type="range">是 HTML5 中的新对象，在页面中展示的就是一个小滑块开关。在这里我们不考虑兼容，就直接拿来用啦。
其中的min属性代表元素的最小值，max属性代表元素的最大值。
最后上一点js代码用来监听滑块的拖动，然后修改对应的样式
var controlX = document.querySelector('#controlX'),
controlY = document.querySelector('#controlY'),
controlZ = document.querySelector('#controlZ');
var cubeX = 0,
cubeY = 0,
cubeZ = 0
controlX.oninput = function (e) {
cubeX = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
controlY.oninput = function (e) {
cubeY = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
controlZ.oninput = function (e) {
cubeZ = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
function updateCube(x, y, z) {
var cube = document.querySelector('#cube');
cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`
}
嗯，基本到这里是写完了，如果想要好看一点的话可以往方块的面贴点图，使用img标签或者是background样式都可以，这里就不写了，最后贴一下完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html cube</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.cube {
display: block;
position: relative;
margin: 200px auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cube-side {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
}
.cube-side.up {
background: #f00;
transform: rotateX(90deg) translateZ(50px);
}
.cube-side.down {
background: #0f0;
transform: rotateX(-90deg) translateZ(50px);
}
.cube-side.left {
background: #00f;
transform: rotateY(-90deg) translateZ(50px);
}
.cube-side.right {
background: #f0f;
transform: rotateY(90deg) translateZ(50px);
}
.cube-side.front {
background: #0ff;
transform: translateZ(50px);
}
.cube-side.back {
background: #ff0;
transform: translateZ(-50px) rotateY(180deg);
}
</style>
</head>
<body>
<div class="cube" id="cube">
<span class="cube-side front">front</span>
<span class="cube-side up">up</span>
<span class="cube-side down">down</span>
<span class="cube-side left">left</span>
<span class="cube-side right">right</span>
<span class="cube-side back">back</span>
</div>
<div class="control" style="text-align: center">
<input type="range" id="controlX" min="-180" max="180">
<input type="range" id="controlY" min="-180" max="180">
<input type="range" id="controlZ" min="-180" max="180">
</div>
<script>
var controlX = document.querySelector('#controlX'),
controlY = document.querySelector('#controlY'),
controlZ = document.querySelector('#controlZ');
var cubeX = 0,
cubeY = 0,
cubeZ = 0
controlX.oninput = function (e) {
cubeX = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
controlY.oninput = function (e) {
cubeY = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
controlZ.oninput = function (e) {
cubeZ = e.target.value;
updateCube(cubeX, cubeY, cubeZ);
}
function updateCube(x, y, z) {
var cube = document.querySelector('#cube');
cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`
}
</script>
</body>
</html>
