<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体摆放演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
font-family: 'Arial', sans-serif;
overflow: hidden;
position: relative; /* 为水印定位提供参考 */
}
/* 水印样式 - 修改为水平 */
.watermark {
position: absolute;
top: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
font-weight: normal;
font-family: 'Arial', sans-serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
pointer-events: none; /* 防止水印干扰交互 */
z-index: 100;
letter-spacing: 1.5px;
white-space: nowrap;
padding: 8px 15px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(3px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.scene-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 20px;
}
.scene {
width: 350px;
height: 350px;
perspective: 1200px;
}
.cube-container {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateY(100px) rotateX(-20deg) rotateY(-30deg); /* 修改：默认垂直位置100px */
}
/* 小立方体样式 */
.small-cube {
position: absolute;
width: 70px;
height: 70px;
transform-style: preserve-3d;
/* 移除了固定的transition，改为通过JS控制 */
}
.face {
position: absolute;
width: 70px;
height: 70px;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}
.front { transform: translateZ(35px); }
.back { transform: translateZ(-35px) rotateY(180deg); }
.right { transform: translateX(35px) rotateY(90deg); }
.left { transform: translateX(-35px) rotateY(-90deg); }
.top { transform: translateY(-35px) rotateX(90deg); }
.bottom { transform: translateY(35px) rotateX(-90deg); }
/* 小立方体颜色 */
.cube-1 .face { background: #FF5252; } /* 红色 */
.cube-2 .face { background: #448AFF; } /* 蓝色 */
.cube-3 .face { background: #66BB6A; } /* 绿色 */
.cube-4 .face { background: #FFCA28; } /* 黄色 */
.cube-5 .face { background: #AB47BC; } /* 紫色 */
.cube-6 .face { background: #26C6DA; } /* 青色 */
.cube-7 .face { background: #FF7043; } /* 橙色 */
.cube-8 .face { background: #9E9E9E; } /* 灰色 */
/* 大立方体组合位置 */
.assembled .cube-1 { transform: translate3d(-35px, -35px, -35px); }
.assembled .cube-2 { transform: translate3d(35px, -35px, -35px); }
.assembled .cube-3 { transform: translate3d(-35px, 35px, -35px); }
.assembled .cube-4 { transform: translate3d(35px, 35px, -35px); }
.assembled .cube-5 { transform: translate3d(-35px, -35px, 35px); }
.assembled .cube-6 { transform: translate3d(35px, -35px, 35px); }
.assembled .cube-7 { transform: translate3d(-35px, 35px, 35px); }
.assembled .cube-8 { transform: translate3d(35px, 35px, 35px); }
/* 底部工具栏 */
footer {
padding: 15px 20px;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: nowrap;
}
.toolbar-title {
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
white-space: nowrap;
min-width: 100px;
text-align: center;
}
.control-panel {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
flex: 1;
justify-content: space-between;
min-width: 0; /* 防止内容溢出 */
}
.control-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 1;
min-width: 0;
max-width: 140px;
}
.control-label {
color: white;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
white-space: nowrap;
width: 100%;
text-align: center;
}
.slider-container {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
input[type="range"] {
flex: 1;
min-width: 70px;
-webkit-appearance: none;
height: 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: white;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.value-display {
min-width: 32px;
text-align: center;
color: white;
font-size: 10px;
font-weight: bold;
}
.button-group {
display: flex;
gap: 6px;
flex-wrap: nowrap;
min-width: 320px;
justify-content: flex-end;
}
button {
padding: 6px 10px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid white;
border-radius: 15px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
button:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
/* 全屏按钮图标样式 */
.fullscreen-icon {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
}
.fullscreen-icon svg {
width: 100%;
height: 100%;
fill: white;
}
/* 全屏模式下的样式 */
body:fullscreen .scene {
width: 450px;
height: 450px;
}
body:-webkit-full-screen .scene {
width: 450px;
height: 450px;
}
body:-moz-full-screen .scene {
width: 450px;
height: 450px;
}
/* 响应式调整 */
@media (max-height: 700px) {
.scene {
width: 280px;
height: 280px;
}
.small-cube {
width: 55px;
height: 55px;
}
.face {
width: 55px;
height: 55px;
}
.front { transform: translateZ(27.5px); }
.back { transform: translateZ(-27.5px) rotateY(180deg); }
.right { transform: translateX(27.5px) rotateY(90deg); }
.left { transform: translateX(-27.5px) rotateY(-90deg); }
.top { transform: translateY(-27.5px) rotateX(90deg); }
.bottom { transform: translateY(27.5px) rotateX(-90deg); }
.assembled .cube-1 { transform: translate3d(-27.5px, -27.5px, -27.5px); }
.assembled .cube-2 { transform: translate3d(27.5px, -27.5px, -27.5px); }
.assembled .cube-3 { transform: translate3d(-27.5px, 27.5px, -27.5px); }
.assembled .cube-4 { transform: translate3d(27.5px, 27.5px, -27.5px); }
.assembled .cube-5 { transform: translate3d(-27.5px, -27.5px, 27.5px); }
.assembled .cube-6 { transform: translate3d(27.5px, -27.5px, 27.5px); }
.assembled .cube-7 { transform: translate3d(-27.5px, 27.5px, 27.5px); }
.assembled .cube-8 { transform: translate3d(27.5px, 27.5px, 27.5px); }
/* 全屏模式下的响应式调整 */
body:fullscreen .scene {
width: 380px;
height: 380px;
}
body:-webkit-full-screen .scene {
width: 380px;
height: 380px;
}
body:-moz-full-screen .scene {
width: 380px;
height: 380px;
}
}
@media (max-height: 550px) {
.scene {
width: 220px;
height: 220px;
}
.small-cube {
width: 45px;
height: 45px;
}
.face {
width: 45px;
height: 45px;
}
.front { transform: translateZ(22.5px); }
.back { transform: translateZ(-22.5px) rotateY(180deg); }
.right { transform: translateX(22.5px) rotateY(90deg); }
.left { transform: translateX(-22.5px) rotateY(-90deg); }
.top { transform: translateY(-22.5px) rotateX(90deg); }
.bottom { transform: translateY(22.5px) rotateX(-90deg); }
.assembled .cube-1 { transform: translate3d(-22.5px, -22.5px, -22.5px); }
.assembled .cube-2 { transform: translate3d(22.5px, -22.5px, -22.5px); }
.assembled .cube-3 { transform: translate3d(-22.5px, 22.5px, -22.5px); }
.assembled .cube-4 { transform: translate3d(22.5px, 22.5px, -22.5px); }
.assembled .cube-5 { transform: translate3d(-22.5px, -22.5px, 22.5px); }
.assembled .cube-6 { transform: translate3d(22.5px, -22.5px, 22.5px); }
.assembled .cube-7 { transform: translate3d(-22.5px, 22.5px, 22.5px); }
.assembled .cube-8 { transform: translate3d(22.5px, 22.5px, 22.5px); }
/* 全屏模式下的响应式调整 */
body:fullscreen .scene {
width: 320px;
height: 320px;
}
body:-webkit-full-screen .scene {
width: 320px;
height: 320px;
}
body:-moz-full-screen .scene {
width: 320px;
height: 320px;
}
}
@media (max-width: 1200px) {
.toolbar {
flex-wrap: wrap;
gap: 15px;
}
.control-panel {
order: 2;
width: 100%;
justify-content: space-between;
}
.button-group {
order: 3;
width: 100%;
justify-content: center;
min-width: auto;
}
.toolbar-title {
order: 1;
width: 100%;
text-align: center;
min-width: auto;
}
}
@media (max-width: 900px) {
.control-panel {
flex-wrap: wrap;
justify-content: center;
}
.control-group {
min-width: 110px;
max-width: 130px;
}
/* 调整水印在小屏幕上的显示 */
.watermark {
font-size: 14px;
top: 15px;
right: 15px;
padding: 6px 12px;
}
}
@media (max-width: 768px) {
.toolbar {
flex-direction: column;
gap: 15px;
}
.control-panel {
flex-direction: column;
gap: 15px;
}
.control-group {
width: 100%;
max-width: 300px;
}
.slider-container {
width: 100%;
}
input[type="range"] {
min-width: 150px;
}
.button-group {
flex-wrap: wrap;
justify-content: center;
}
button {
flex: 1;
min-width: 110px;
}
/* 调整水印在移动设备上的显示 */
.watermark {
font-size: 12px;
top: 10px;
right: 10px;
padding: 5px 10px;
letter-spacing: 1px;
}
}
@media (max-width: 480px) {
.control-group {
max-width: 100%;
}
.button-group {
flex-direction: column;
width: 100%;
}
button {
width: 100%;
}
/* 调整水印在超小屏幕上的显示 */
.watermark {
font-size: 11px;
top: 8px;
right: 8px;
padding: 4px 8px;
letter-spacing: 0.5px;
}
}
/* 打印时隐藏水印 */
@media print {
.watermark {
display: none;
}
}
</style>
</head>
<body>
<!-- 水印 - 水平显示 -->
<div class="watermark">本演示程序由AI生成</div>
<div class="scene-container">
<div class="scene">
<div class="cube-container" id="cubeContainer">
<!-- 8个小立方体 -->
<div class="small-cube cube-1">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-2">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-3">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-4">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-5">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-6">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-7">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="small-cube cube-8">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="toolbar">
<div class="toolbar-title">立方体摆放演示</div>
<div class="control-panel">
<div class="control-group">
<div class="control-label">垂直位置</div>
<div class="slider-container">
<input type="range" id="verticalPosition" min="0" max="150" value="100"> <!-- 修改：默认值100 -->
<span class="value-display" id="verticalValue">100px</span> <!-- 修改：显示值100px -->
</div>
</div>
<div class="control-group">
<div class="control-label">分解距离</div>
<div class="slider-container">
<input type="range" id="explodeDistance" min="50" max="200" value="100"> <!-- 修改：默认值100 -->
<span class="value-display" id="distanceValue">100px</span> <!-- 修改：显示值100px -->
</div>
</div>
<div class="control-group">
<div class="control-label">旋转速度</div>
<div class="slider-container">
<input type="range" id="rotationSpeed" min="0" max="2" step="0.1" value="0.5">
<span class="value-display" id="speedValue">0.5</span>
</div>
</div>
<div class="control-group">
<div class="control-label">动画速度</div>
<div class="slider-container">
<input type="range" id="transitionSpeed" min="0.2" max="3" step="0.1" value="2"> <!-- 修改：默认值2 -->
<span class="value-display" id="transitionValue">2s</span> <!-- 修改：显示值2s -->
</div>
</div>
</div>
<div class="button-group">
<button onclick="explode()">分解</button>
<button onclick="assemble()">组合</button>
<button onclick="toggleRotation()">暂停/旋转</button>
<button onclick="resetAll()">重置</button>
<button onclick="toggleFullscreen()" id="fullscreenToggle" title="全屏显示">
<span class="fullscreen-icon">
<!-- 全屏图标 -->
<svg id="fullscreenIcon" viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</svg>
<!-- 退出全屏图标（默认隐藏） -->
<svg id="exitFullscreenIcon" viewBox="0 0 24 24" style="display: none;">
<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
</svg>
</span>
</button>
</div>
</div>
</footer>
<script>
const cubeContainer = document.getElementById('cubeContainer');
const verticalPositionSlider = document.getElementById('verticalPosition');
const verticalValue = document.getElementById('verticalValue');
const explodeDistanceSlider = document.getElementById('explodeDistance');
const distanceValue = document.getElementById('distanceValue');
const rotationSpeedSlider = document.getElementById('rotationSpeed');
const speedValue = document.getElementById('speedValue');
const transitionSpeedSlider = document.getElementById('transitionSpeed');
const transitionValue = document.getElementById('transitionValue');
const fullscreenToggle = document.getElementById('fullscreenToggle');
const fullscreenIcon = document.getElementById('fullscreenIcon');
const exitFullscreenIcon = document.getElementById('exitFullscreenIcon');
let isRotating = true;
let isAssembled = true;
let rotationAngle = 0;
let animationId = null;
let verticalPosition = 100; // 修改：默认下移100px（原50px）
let explodeDistance = 100; // 修改：默认分解距离100px（原160px）
let rotationSpeed = 0.5; // 默认旋转速度
let transitionDuration = 2; // 修改：默认分解组合动画速度2秒（原1.5秒）
let isFullscreen = false;
// 更新立方体变换
function updateCubeTransform() {
cubeContainer.style.transform = `translateY(${verticalPosition}px) rotateX(-20deg) rotateY(${rotationAngle}deg)`;
}
// 更新所有小立方体的过渡时间
function updateAllCubeTransition() {
const cubes = document.querySelectorAll('.small-cube');
cubes.forEach(cube => {
cube.style.transition = `transform ${transitionDuration}s cubic-bezier(0.68, -0.55, 0.27, 1.55)`;
});
}
// 更新分解位置
function updateExplodePositions() {
if (!isAssembled) {
const cubes = document.querySelectorAll('.small-cube');
const positions = [
{ x: -explodeDistance, y: -explodeDistance, z: -explodeDistance },
{ x: explodeDistance, y: -explodeDistance, z: -explodeDistance },
{ x: -explodeDistance, y: explodeDistance, z: -explodeDistance },
{ x: explodeDistance, y: explodeDistance, z: -explodeDistance },
{ x: -explodeDistance, y: -explodeDistance, z: explodeDistance },
{ x: explodeDistance, y: -explodeDistance, z: explodeDistance },
{ x: -explodeDistance, y: explodeDistance, z: explodeDistance },
{ x: explodeDistance, y: explodeDistance, z: explodeDistance }
];
cubes.forEach((cube, index) => {
cube.style.transform = `translate3d(${positions[index].x}px, ${positions[index].y}px, ${positions[index].z}px)`;
});
}
}
// 使用JavaScript控制旋转
function rotateCube() {
if (isRotating) {
rotationAngle += rotationSpeed;
updateCubeTransform();
}
animationId = requestAnimationFrame(rotateCube);
}
// 开始旋转
rotateCube();
// 分解立方体
function explode() {
if (!isAssembled) return;
cubeContainer.classList.remove('assembled');
isAssembled = false;
updateExplodePositions();
}
// 组合立方体
function assemble() {
if (isAssembled) return;
cubeContainer.classList.add('assembled');
isAssembled = true;
// 移除自定义transform，让CSS类生效
const cubes = document.querySelectorAll('.small-cube');
cubes.forEach(cube => {
cube.style.transform = '';
});
}
// 切换旋转状态
function toggleRotation() {
isRotating = !isRotating;
}
// 重置所有设置
function resetAll() {
verticalPositionSlider.value = 100; // 修改：重置为100
explodeDistanceSlider.value = 100; // 修改：重置为100
rotationSpeedSlider.value = 0.5;
transitionSpeedSlider.value = 2; // 修改：重置为2
verticalPosition = 100; // 修改：重置为100
explodeDistance = 100; // 修改：重置为100
rotationSpeed = 0.5;
transitionDuration = 2; // 修改：重置为2
verticalValue.textContent = '100px'; // 修改：显示100px
distanceValue.textContent = '100px'; // 修改：显示100px
speedValue.textContent = '0.5';
transitionValue.textContent = '2s'; // 修改：显示2s
updateCubeTransform();
updateAllCubeTransition();
if (!isAssembled) {
updateExplodePositions();
}
}
// 更新垂直位置
function updateVerticalPosition() {
verticalPosition = parseInt(verticalPositionSlider.value);
verticalValue.textContent = `${verticalPosition}px`;
updateCubeTransform();
}
// 更新分解距离
function updateExplodeDistance() {
explodeDistance = parseInt(explodeDistanceSlider.value);
distanceValue.textContent = `${explodeDistance}px`;
if (!isAssembled) {
updateExplodePositions();
}
}
// 更新旋转速度
function updateRotationSpeed() {
rotationSpeed = parseFloat(rotationSpeedSlider.value);
speedValue.textContent = rotationSpeed.toFixed(1);
}
// 更新过渡速度
function updateTransitionSpeed() {
transitionDuration = parseFloat(transitionSpeedSlider.value);
transitionValue.textContent = `${transitionDuration.toFixed(1)}s`;
updateAllCubeTransition();
}
// 切换全屏模式
function toggleFullscreen() {
if (!isFullscreen) {
// 进入全屏
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
} else {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
}
// 更新全屏按钮状态
function updateFullscreenButton() {
if (isFullscreen) {
// 当前是全屏状态，显示退出全屏图标
fullscreenIcon.style.display = 'none';
exitFullscreenIcon.style.display = 'block';
fullscreenToggle.title = '退出全屏';
} else {
// 当前不是全屏状态，显示全屏图标
fullscreenIcon.style.display = 'block';
exitFullscreenIcon.style.display = 'none';
fullscreenToggle.title = '全屏显示';
}
}
// 监听全屏变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
function handleFullscreenChange() {
// 检查当前是否处于全屏状态
isFullscreen = !!(
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
updateFullscreenButton();
}
// 初始状态为组合状态
cubeContainer.classList.add('assembled');
updateAllCubeTransition();
updateFullscreenButton(); // 初始化全屏按钮状态
// 监听滑块变化
verticalPositionSlider.addEventListener('input', updateVerticalPosition);
explodeDistanceSlider.addEventListener('input', updateExplodeDistance);
rotationSpeedSlider.addEventListener('input', updateRotationSpeed);
transitionSpeedSlider.addEventListener('input', updateTransitionSpeed);
</script>
</body>
</html>
index.html
style.css
index.js
index.html