HTML CSS와 자바스크립트를 사용한 큐브 환상
- Mary-Kate Olsen원래의
- 2024-10-23 00:02:30506검색
팔로우: https://www.instagram.com/webstreet_code/
암호
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Interactive Rubik's Cube</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #121212;
}
.scene {
width: 300px;
height: 300px;
perspective: 1000px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}
.cube-face {
position: absolute;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 300px;
height: 300px;
background: #fff;
border: 2px solid #333;
transform: translateZ(150px);
}
.cube-face div {
border: 2px solid #d3caca;
}
/* Colors for each face */
.front div { background: red; }
.back div { background: orange; }
.left div { background: blue; }
.right div { background: green; }
.top div { background: yellow; }
.bottom div { background: white; }
.cube-face.front { transform: rotateY(0deg) translateZ(150px); }
.cube-face.back { transform: rotateY(180deg) translateZ(150px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(150px); }
.cube-face.right { transform: rotateY(90deg) translateZ(150px); }
.cube-face.top { transform: rotateX(90deg) translateZ(150px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(150px); }
/* Cube rotation on hover */
.scene:hover .cube {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<!-- 6 faces of the Rubik's Cube -->
<div class="cube-face front">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="cube-face back">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="cube-face left">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="cube-face right">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="cube-face top">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="cube-face bottom">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
</div>
</body>
</html>
위 내용은 HTML CSS와 자바스크립트를 사용한 큐브 환상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.