221 lines
9.9 KiB
HTML
221 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>3D Rotating Cube</title>
|
|
<style>
|
|
:root {
|
|
--perspective: 800px;
|
|
--cube-size: 200px;
|
|
--speed: 8s;
|
|
--direction: 1;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
.scene {
|
|
perspective: var(--perspective);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--cube-size);
|
|
margin-bottom: 50px;
|
|
}
|
|
.cube {
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
}
|
|
.cube.is-rotating {
|
|
animation: rotateCube var(--speed) linear infinite;
|
|
}
|
|
.is-paused { animation-play-state: paused !important; }
|
|
|
|
@keyframes rotateCube {
|
|
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
|
|
100% {
|
|
transform:
|
|
rotateX(calc(360deg * var(--direction) * var(--axisX-mult, 1)))
|
|
rotateY(calc(360deg * var(--direction) * var(--axisY-mult, 1)))
|
|
rotateZ(calc(360deg * var(--direction) * 0.5 * var(--axisZ-mult, 0)));
|
|
}
|
|
}
|
|
|
|
.cube-face {
|
|
position: absolute;
|
|
width: var(--cube-size);
|
|
height: var(--cube-size);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 24px; font-weight: bold; color: #fff; opacity: 0.85;
|
|
}
|
|
.face-front { transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(52,152,219,0.7); }
|
|
.face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(142,68,173,0.7); }
|
|
.face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(39,174,96,0.7); }
|
|
.face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(243,156,18,0.7); }
|
|
.face-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(231,76,60,0.7); }
|
|
.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(127,140,141,0.7); }
|
|
|
|
.controls {
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 12px; padding: 24px;
|
|
display: flex; flex-direction: column; gap: 16px;
|
|
width: 320px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
|
|
}
|
|
.control-group { display: flex; flex-direction: column; gap: 4px; }
|
|
.control-label {
|
|
font-size: 14px; color: #a0a0a0;
|
|
display: flex; justify-content: space-between;
|
|
}
|
|
.control-value { color: #4fc3f7; font-weight: bold; }
|
|
.button-group { display: flex; gap: 12px; justify-content: center; }
|
|
button {
|
|
background: #2c3e50; color: #ecf0f1;
|
|
border: none; padding: 8px 16px; border-radius: 6px;
|
|
cursor: pointer; display: flex; align-items: center;
|
|
gap: 6px; transition: all 0.2s; font-size: 14px;
|
|
}
|
|
button:hover { background: #34495e; }
|
|
button.primary { background: #2980b9; }
|
|
button.primary:hover { background: #3498db; }
|
|
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.btn-icon { font-size: 18px; }
|
|
input[type="range"] {
|
|
width: 100%; -webkit-appearance: none;
|
|
height: 6px; background: #2c3e50; border-radius: 3px; outline: none;
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none; width: 18px; height: 18px;
|
|
background: #4fc3f7; border-radius: 50%; cursor: pointer;
|
|
}
|
|
.checkbox-group { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
|
|
.checkbox-group label { font-size: 14px; }
|
|
input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #4fc3f7; }
|
|
.axis-toggles { display: flex; gap: 12px; }
|
|
|
|
@media (max-width: 500px) {
|
|
.controls { width: 90%; padding: 16px; }
|
|
:root { --cube-size: 150px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scene">
|
|
<div class="cube is-rotating" id="cube">
|
|
<div class="cube-face face-front">Front</div>
|
|
<div class="cube-face face-back">Back</div>
|
|
<div class="cube-face face-left">Left</div>
|
|
<div class="cube-face face-right">Right</div>
|
|
<div class="cube-face face-top">Top</div>
|
|
<div class="cube-face face-bottom">Bottom</div>
|
|
</div>
|
|
</div>
|
|
<div class="controls">
|
|
<div class="button-group">
|
|
<button id="playPauseBtn" class="primary">
|
|
<span class="btn-icon" id="playPauseIcon">⏸️</span>
|
|
<span id="playPauseText">Pause</span>
|
|
</button>
|
|
<button id="restartBtn"><span class="btn-icon">🚀</span>Restart</button>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="control-label">Speed</div>
|
|
<input type="range" id="speedSlider" min="1" max="20" value="8" step="0.5">
|
|
<span class="control-value" id="speedValue">8.0s</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="control-label">Perspective</div>
|
|
<input type="range" id="perspectiveSlider" min="400" max="1600" value="800" step="50">
|
|
<span class="control-value" id="perspectiveValue">800px</span>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="reverseCheckbox">
|
|
<label for="reverseCheckbox">Reverse direction</label>
|
|
</div>
|
|
<div class="axis-toggles">
|
|
<div class="checkbox-group"><input type="checkbox" id="axisX" checked><label for="axisX">X</label></div>
|
|
<div class="checkbox-group"><input type="checkbox" id="axisY" checked><label for="axisY">Y</label></div>
|
|
<div class="checkbox-group"><input type="checkbox" id="axisZ"><label for="axisZ">Z</label></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cube = document.getElementById('cube');
|
|
const root = document.documentElement;
|
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
|
const restartBtn = document.getElementById('restartBtn');
|
|
const playPauseIcon = document.getElementById('playPauseIcon');
|
|
const playPauseText = document.getElementById('playPauseText');
|
|
const speedSlider = document.getElementById('speedSlider');
|
|
const speedValue = document.getElementById('speedValue');
|
|
const perspectiveSlider = document.getElementById('perspectiveSlider');
|
|
const perspectiveValue = document.getElementById('perspectiveValue');
|
|
const reverseCheckbox = document.getElementById('reverseCheckbox');
|
|
const axisX = document.getElementById('axisX');
|
|
const axisY = document.getElementById('axisY');
|
|
const axisZ = document.getElementById('axisZ');
|
|
let isPlaying = true;
|
|
|
|
function updateAnimation() {
|
|
reverseCheckbox.checked
|
|
? root.style.setProperty('--direction', '-1')
|
|
: root.style.setProperty('--direction', '1');
|
|
root.style.setProperty('--axisX-mult', axisX.checked ? '1' : '0');
|
|
root.style.setProperty('--axisY-mult', axisY.checked ? '1' : '0');
|
|
root.style.setProperty('--axisZ-mult', axisZ.checked ? '1' : '0');
|
|
cube.classList.remove('is-rotating');
|
|
void cube.offsetWidth;
|
|
cube.classList.add('is-rotating');
|
|
if (!isPlaying) cube.classList.add('is-paused');
|
|
}
|
|
|
|
playPauseBtn.addEventListener('click', () => {
|
|
isPlaying = !isPlaying;
|
|
isPlaying
|
|
? (cube.classList.remove('is-paused'), playPauseIcon.textContent = '⏸️', playPauseText.textContent = 'Pause')
|
|
: (cube.classList.add('is-paused'), playPauseIcon.textContent = '▶️', playPauseText.textContent = 'Play');
|
|
playPauseBtn.classList.toggle('primary', isPlaying);
|
|
});
|
|
|
|
restartBtn.addEventListener('click', () => {
|
|
cube.classList.remove('is-rotating', 'is-paused');
|
|
void cube.offsetWidth;
|
|
cube.classList.add('is-rotating');
|
|
if (!isPlaying) cube.classList.add('is-paused');
|
|
});
|
|
|
|
speedSlider.addEventListener('input', () => {
|
|
const val = speedSlider.value;
|
|
root.style.setProperty('--speed', `${val}s`);
|
|
speedValue.textContent = `${parseFloat(val).toFixed(1)}s`;
|
|
});
|
|
|
|
perspectiveSlider.addEventListener('input', () => {
|
|
const val = perspectiveSlider.value;
|
|
root.style.setProperty('--perspective', `${val}px`);
|
|
perspectiveValue.textContent = `${val}px`;
|
|
});
|
|
|
|
reverseCheckbox.addEventListener('change', updateAnimation);
|
|
axisX.addEventListener('change', updateAnimation);
|
|
axisY.addEventListener('change', updateAnimation);
|
|
axisZ.addEventListener('change', updateAnimation);
|
|
updateAnimation();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|