Skip to content

Commit f2f3d53

Browse files
bgoonzbgoonz
committed
initial commit
0 parents  commit f2f3d53

File tree

245 files changed

+48984
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

245 files changed

+48984
-0
lines changed

‎3D Box/3Dbox.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
body {
2+
background-color: #262626;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
margin: 0 auto;
7+
height: 100vh;
8+
min-height: 600px;
9+
}
10+
#top {
11+
position: absolute;
12+
top: 25%;
13+
padding-bottom: 20px;
14+
border-bottom-color:#f0f0f0;
15+
border-bottom: 1px solid #ccc;
16+
text-align: center;
17+
}
18+
h2{
19+
font-family: Verdana;
20+
font-size: 2em;
21+
color: #f0f0f0;
22+
}
23+
h4 {
24+
font-family: sans-serif;
25+
margin-bottom: 0px;
26+
color: #f0f0f0
27+
}
28+
h4 i{
29+
margin-right:5px;
30+
}
31+
#container {
32+
height: 100vh;
33+
width: 50vw;
34+
min-height: 600px;
35+
min-width: 300px;
36+
position: absolute;
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
justify-content: center;
41+
perspective: 500px;
42+
}
43+
#box * {
44+
width: 150px;
45+
height: 150px;
46+
backface-visibility:visible;
47+
position: absolute;
48+
margin: 0 auto;
49+
}
50+
51+
#box {
52+
margin-top: 200px;
53+
transform-style: preserve-3d;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
animation: skew 3s linear 0s infinite;
58+
}
59+
.face2 {
60+
transform: translateZ(-150px);
61+
}
62+
63+
.face3 {
64+
transform: rotateX(90deg) translateZ(75px) translateY(-75px);
65+
}
66+
67+
.face4 {
68+
transform: rotateX(90deg) translateZ(-75px) translateY(-75px);
69+
}
70+
71+
.face5 {
72+
transform: rotateY(90deg) translateZ(-75px) translateX(75px);
73+
}
74+
75+
.face6 {
76+
transform: rotateY(90deg) translateZ(75px) translateX(75px);
77+
}
78+
.color1 {
79+
background: linear-gradient(#ffffff, #f0f0f0, #eaeaea);
80+
opacity: 0.8;
81+
}
82+
.color2 {
83+
background: linear-gradient(#dbdbdb, #d2d2d2, #cecece);
84+
opacity: 0.8;
85+
}
86+
.color3 {
87+
background: linear-gradient(#d0d0d0, #c7c7c7, #c2c2c2);
88+
opacity: 0.8;
89+
}
90+
@keyframes skew {
91+
0% {
92+
transform: rotateY(0deg) rotateZ(0deg);
93+
}
94+
100% {
95+
transform: rotateY(360deg) rotateZ(360deg);
96+
}
97+
}

‎3D Box/3Dbox.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="3Dbox.css">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
12+
<div id="container">
13+
<div id="top">
14+
<h2>truecodes.org</h2>
15+
<h4><i class="fab fa-instagram"></i>codeblogger</h4>
16+
</div>
17+
<div id="box">
18+
<div class="face1 color1"></div>
19+
<div class="face2 color1"></div>
20+
<div class="face3 color2"></div>
21+
<div class="face4 color2"></div>
22+
<div class="face5 color3"></div>
23+
<div class="face6 color3"></div>
24+
</div>
25+
</div>
26+
27+
28+
29+
</body>
30+
</html>

‎3D Box/output.png‎

31.9 KB
Loading

0 commit comments

Comments
 (0)