Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit46c6348

Browse files
committed
Added Project #35 - 3D Cube
1 parenta0c8afb commit46c6348

File tree

6 files changed

+176
-0
lines changed

6 files changed

+176
-0
lines changed

‎.DS_Store

-6 KB
Binary file not shown.

‎34- Custom Select Component/.DS_Store

-6 KB
Binary file not shown.

‎35- 3D Cube/.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port":5501
3+
}

‎35- 3D Cube/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<title>3D Cube</title>
8+
<linkrel="stylesheet"href="style.css"/>
9+
</head>
10+
<body>
11+
<divclass="grid">
12+
<labelfor="front"class="btn">Front</label>
13+
<labelfor="left"class="btn"> Left</label>
14+
<labelfor="right"class="btn"> Right</label>
15+
<labelfor="top"class="btn">Top</label>
16+
<labelfor="bottom"class="btn">Bottom</label>
17+
<labelfor="back"class="btn">Back</label>
18+
</div>
19+
<inputtype="radio"name="face"id="front"/>
20+
<inputtype="radio"id="left"name="face"/>
21+
<inputtype="radio"id="right"name="face"/>
22+
<inputtype="radio"id="top"name="face"/>
23+
<inputtype="radio"id="bottom"name="face"/>
24+
<inputtype="radio"id="back"name="face"/>
25+
26+
<divclass="container">
27+
<divclass="cube">
28+
<divclass="face front">Front</div>
29+
<divclass="face back">Back</div>
30+
<divclass="face top">Top</div>
31+
<divclass="face right">Right</div>
32+
<divclass="face left">Left</div>
33+
<divclass="face bottom">Bottom</div>
34+
</div>
35+
</div>
36+
</body>
37+
</html>

‎35- 3D Cube/snippets.txt

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<div class="grid">
3+
<label for="front" class="btn">Front</label>
4+
<label for="left" class="btn"> Left </label>
5+
<label for="right" class="btn"> Right </label>
6+
<label for="top" class="btn">Top </label>
7+
<label for="bottom" class="btn">Bottom </label>
8+
<label for="back" class="btn">Back </label>
9+
</div>
10+
<input type="radio" name="face" id="front" />
11+
<input type="radio" id="left" name="face" />
12+
<input type="radio" id="right" name="face" />
13+
<input type="radio" id="top" name="face" />
14+
<input type="radio" id="bottom" name="face" />
15+
<input type="radio" id="back" name="face" />
16+
17+
18+
<!-- styles -->
19+
border: 1px solid rgba(142, 142, 142, 0.683);
20+
box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1);
21+
22+
transition: all 0.85s cubic-bezier(1, -0.75, 0.5, 1.2);

‎35- 3D Cube/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
:root {
2+
--size:300px;
3+
}
4+
5+
body {
6+
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande",
7+
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
8+
display: grid;
9+
place-content: center;
10+
min-height:80vh;
11+
}
12+
13+
/* container */
14+
.container {
15+
margin-top:50px;
16+
perspective:1000px;
17+
width:var(--size);
18+
height:var(--size);
19+
}
20+
21+
.cube {
22+
position: relative;
23+
width:100%;
24+
height:100%;
25+
transform-style: preserve-3d;
26+
transform:rotateX(-15deg)rotateY(15deg);
27+
transition: all0.85scubic-bezier(1,-0.75,0.5,1.2);
28+
/* turn the cube */
29+
/* transform: rotateX(90deg); */
30+
/* transform: rotateY(90deg); */
31+
}
32+
33+
/* Faces */
34+
.face {
35+
position: absolute;
36+
border:1px solidrgba(142,142,142,0.683);
37+
box-shadow: inset0060pxrgba(0,0,0,0.1);
38+
width:var(--size);
39+
height:var(--size);
40+
line-height:var(--size);
41+
text-align: center;
42+
font-size:1.25rem;
43+
background-color:#fff;
44+
opacity:0.8;
45+
}
46+
47+
.front {
48+
transform:translateZ(150px);
49+
}
50+
51+
.back {
52+
transform:rotateY(180deg)translateZ(150px);
53+
}
54+
55+
.top {
56+
transform:rotateX(90deg)translateZ(150px);
57+
}
58+
59+
.right {
60+
transform:rotateY(90deg)translateZ(150px);
61+
}
62+
63+
.left {
64+
transform:rotateY(-90deg)translateZ(150px);
65+
}
66+
67+
.bottom {
68+
transform:rotateX(-90deg)translateZ(150px);
69+
}
70+
71+
/* Interactions */
72+
#bottom:checked~ .container .cube {
73+
transform:rotateX(90deg);
74+
}
75+
76+
#top:checked~ .container .cube {
77+
transform:rotateX(-90deg);
78+
}
79+
80+
#left:checked~ .container .cube {
81+
transform:rotateY(90deg);
82+
}
83+
84+
#right:checked~ .container .cube {
85+
transform:rotateY(-90deg);
86+
}
87+
88+
#back:checked~ .container .cube {
89+
transform:rotateY(180deg);
90+
}
91+
92+
/* Buttons */
93+
input[type="radio"] {
94+
display: none;
95+
}
96+
97+
.grid {
98+
display: grid;
99+
grid-template-columns:repeat(3,1fr);
100+
gap:0.5rem;
101+
}
102+
.btn {
103+
padding:0.5rem1rem;
104+
font-size:0.85rem;
105+
border-radius:0.25rem;
106+
background-color:#4caf50;
107+
color:#fff;
108+
text-align: center;
109+
cursor: pointer;
110+
}
111+
112+
.btn:hover {
113+
box-shadow:0001px#fff,0002px#4caf50;
114+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp