共计 5201 个字符，预计需要花费 14 分钟才能阅读完成。
文章目录
- 前言
- 一、项目需求背景
- 二、CSS3 3D 基础知识介绍
-
- 2.1 什么是 CSS3 3D？
- 2.2 主要使用的 CSS 属性
- 三、使用 HTML 和 CSS 搭建魔方结构
- 四、让魔方动起来：CSS3 动画
- 五、九宫格数字交换的 JavaScript 实现
-
- 5.1 九宫格布局
- 5.2 随机交换数字
- 六、随机交换与相邻格子的逻辑
- 七、项目总结与完整代码
- 总结
前言
在前端开发中，视觉效果的提升一直是提升用户体验的重要手段。通过 CSS3 和 JavaScript 的组合，我们可以实现很多令人惊叹的动画效果。在本文中，我们将通过一个实际的案例，展示如何实现一个旋转魔方的 3D 效果，并且在魔方的九宫格上随机交换数字。这个动效看似复杂，但通过合理的 CSS 与 JavaScript 编排，你会发现它不仅有趣且非常具有实用性。
一、项目需求背景
在日常的网页设计中，3D 效果和动效已经逐渐成为了增强用户体验的重要元素。这次实现的效果，我希望通过一个 3D 魔方展示如何将 CSS3 的 3D 变换与 JavaScript 的动态交互相结合。魔方不仅会进行旋转，魔方面上的数字也会以随机相邻交换的方式进行变化。
二、CSS3 3D 基础知识介绍
2.1 什么是 CSS3 3D？
CSS3 引入了 transform 属性，允许开发者对元素进行三维操作。我们可以通过 rotateX、rotateY 等方法在三维空间中旋转元素。本文中的魔方正是基于这些技术实现的，它不仅在 X、Y、Z 轴上进行旋转，同时使用 perspective 属性给予了它空间感。
2.2 主要使用的 CSS 属性
• transform: 进行三维旋转、平移的核心属性。• transform-style: 确保元素的子元素在 3D 空间中呈现。• @keyframes: 定义动画效果的关键帧，确保魔方能流畅旋转。三、使用 HTML 和 CSS 搭建魔方结构
在实现复杂动效前，我们首先需要搭建魔方的基础结构。魔方由 6 个面组成，每个面都是一个九宫格布局。具体的 HTML 结构如下：
div class="magic-cube">
div class="face front">div>
div class="face back">div>
div class="face left">div>
div class="face right">div>
div class="face top">div>
div class="face bottom">div>
div>
每个面对应一个 CSS 类，通过 position 和 transform 属性定义它们在 3D 空间中的位置。
四、让魔方动起来：CSS3 动画
使用 CSS 的 @keyframes，我们可以让魔方进行自动旋转。通过多个关键帧的设定，魔方可以围绕 X、Y、Z 三个轴进行不同方向的旋转。
@keyframes complexRotate {
0% { transform: rotateX(-30deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(120deg) rotateY(180deg) rotateZ(-80deg); }
}
五、九宫格数字交换的 JavaScript 实现
5.1 九宫格布局
我们通过 HTML 动态生成九宫格的每个格子，并为每个格子指定初始的数字和位置。
positions.forEach((pos, i) => {
const cell = document.createElement('div');
cell.textContent = i + 1;
cell.style.top = pos.top;
cell.style.left = pos.left;
face.appendChild(cell);
});
5.2 随机交换数字
为了让数字的变化更具动感，我们通过 JavaScript 随机交换相邻的格子位置。交换的动画由 CSS 的 transition 属性负责，实现平滑过渡。
六、随机交换与相邻格子的逻辑
要确保数字交换的规则是合理的，我们引入了一个函数来判断两个格子是否相邻。通过计算九宫格的行列位置，我们限制了交换只能发生在相邻的格子之间。
function areAdjacent(index1, index2) {
const row1 = Math.floor(index1 / 3), col1 = index1 % 3;
const row2 = Math.floor(index2 / 3), col2 = index2 % 3;
return (row1 === row2 && Math.abs(col1 - col2) === 1) || (col1 === col2 && Math.abs(row1 - row2) === 1);
}
七、项目总结与完整代码
通过本文，我们实现了一个旋转魔方的 3D 效果，并在每个面上实现了随机相邻格子的数字交换动效。CSS3 的 3D 技术为魔方带来了空间感，JavaScript 则为九宫格的动态变化提供了强大的支持。本文的核心在于 CSS3 动画与 JavaScript 交互的结合，通过这样的小项目，你可以掌握如何实现更加复杂且富有视觉冲击力的网页效果。
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>3D Magic Cube with More Tile Movementstitle>
style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2e3440;
margin: 0;
}
.magic-cube {
position: relative;
width: 180px;
height: 180px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
animation: complexRotate 8s infinite linear;
}
.face {
position: absolute;
width: 180px;
height: 180px;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.face div {
width: calc(100% / 3);
height: calc(100% / 3);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
box-sizing: border-box;
position: absolute;
transition: all 0.5s ease;
}
.front { transform: rotateY(0deg) translateZ(90px); background-color: #ff4d4d; }
.back { transform: rotateY(180deg) translateZ(90px); background-color: #4d94ff; }
.left { transform: rotateY(-90deg) translateZ(90px); background-color: #4dff4d; }
.right { transform: rotateY(90deg) translateZ(90px); background-color: #ffff4d; }
.top { transform: rotateX(90deg) translateZ(90px); background-color: #ff944d; }
.bottom { transform: rotateX(-90deg) translateZ(90px); background-color: #944dff; }
@keyframes complexRotate {
0% { transform: rotateX(-30deg) rotateY(-45deg) rotateZ(0deg); }
25% { transform: rotateX(30deg) rotateY(45deg) rotateZ(20deg); }
50% { transform: rotateX(60deg) rotateY(90deg) rotateZ(-40deg); }
75% { transform: rotateX(90deg) rotateY(135deg) rotateZ(60deg); }
100% { transform: rotateX(120deg) rotateY(180deg) rotateZ(-80deg); }
}
style>
head>
body>
div class="magic-cube">
div class="face front">div>
div class="face back">div>
div class="face left">div>
div class="face right">div>
div class="face top">div>
div class="face bottom">div>
div>
script>
const positions = [
{top: '0%', left: '0%'}, {top: '0%', left: '33.33%'}, {top: '0%', left: '66.66%'},
{top: '33.33%', left: '0%'}, {top: '33.33%', left: '33.33%'}, {top: '33.33%', left: '66.66%'},
{top: '66.66%', left: '0%'}, {top: '66.66%', left: '33.33%'}, {top: '66.66%', left: '66.66%'}
];
function areAdjacent(index1, index2) {
const row1 = Math.floor(index1 / 3), col1 = index1 % 3;
const row2 = Math.floor(index2 / 3), col2 = index2 % 3;
return (row1 === row2 && Math.abs(col1 - col2) === 1) || (col1 === col2 && Math.abs(row1 - row2) === 1);
}
document.addEventListener("DOMContentLoaded", () => {
const faces = document.querySelectorAll('.face');
faces.forEach(face => {
positions.forEach((pos, i) => {
const cell = document.createElement('div');
cell.textContent = i + 1;
cell.style.top = pos.top;
cell.style.left = pos.left;
face.appendChild(cell);
});
});
setInterval(() => {
faces.forEach(face => {
const cells = face.querySelectorAll('div');
for (let i = 0; i 3; i++) {
let index1 = Math.floor(Math.random() * 9);
let index2 = Math.floor(Math.random() * 9);
while (!areAdjacent(index1, index2)) {
index2 = Math.floor(Math.random() * 9);
}
const cell1 = cells[index1];
const cell2 = cells[index2];
const tempTop = cell1.style.top;
const tempLeft = cell1.style.left;
cell1.style.top = cell2.style.top;
cell1.style.left = cell2.style.left;
cell2.style.top = tempTop;
cell2.style.left = tempLeft;
}
});
}, 1200);
});
script>
body>
html>
总结
这篇博文展示了 CSS3 和 JavaScript 结合使用的强大之处，通过这个项目，我们不仅掌握了 CSS3 3D 动画的基本操作，还学会了如何利用 JavaScript 实现页面中动态内容的变化。希望这篇文章能为你今后的项目带来一些启发，无论是复杂的动画效果还是简单的交互，CSS 和 JavaScript 的结合总能带来惊艳的视觉效果。
原文地址: 使用 CSS3 与 JavaScript 实现炫酷的 3D 旋转魔方及九宫格交换动效
