ホームページ >ウェブフロントエンド >jsチュートリアル >HTML CSSとJavaScriptを使用した立方体錯視
HTML CSSとJavaScriptを使用した立方体錯視
- Mary-Kate Olsenオリジナル
- 2024-10-23 00:02:30603ブラウズ
フォローしてください: 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とJavaScriptを使用した立方体錯視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。