yequari
/
yeet.marigold.town
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

too many shapes

This commit is contained in:
yequari 2023-09-26 21:21:18 -07:00
parent dda401d147
commit 8767cd544d
4 changed files with 91 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/counter.css
View File

@ -1,6 +1,71 @@
.wrapper {
width: 100%;
height: 400px;
width: 800px;
height: 300px;
display: block;
background-color: aqua;
margin: none;
}
.counter {
width: 100%;
height: 100%;
display: block;
perspective: 1200px; /* determines size of the overall element in the final transform */
backface-visibility: visible;
transform-style: preserve-3d;
perspective-origin: 50% 50%;
transform: translateZ(-100px) rotateX(-30deg);
}
.face {
width: 800px;
height: 300px;
display: block;
position: absolute;
}
.vert-side {
width: 200px;
height: 300px;
display: block;
position: absolute;
left: 300px;
}
.horiz-side {
width: 800px;
height: 200px;
display: block;
position: absolute;
top: 50px;
}
.top-shelf {
background-color: #666666;
transform: rotateX(90deg) translateZ(150px);
}
.bottom-shelf {
background-color: #666666;
transform: rotateX(-90deg) translateZ(150px);
}
.right-shelf {
background-color: #333333;
transform: rotateY(90deg) translateZ(400px);
right: 0;
}
.left-shelf {
background-color: #333333;
transform: rotateY(-90deg) translateZ(400px);
}
.front-shelf {
background: rgba(255,255,255,0.3);
transform: translateZ(100px);
}
.back-shelf {
background: rgba(255,255,255,0.8);
transform: rotateY(180deg) translateZ(100px);
}

6
css/shelf.css
View File

@ -26,6 +26,7 @@
height: 100px;
display: block;
position: absolute;
left: 100px;
}
.top-shelf {
background-color: #DAA06D;
@ -39,13 +40,12 @@
.right-shelf {
background-color: #6F4E37;
transform: rotateY(90deg) translateZ(50px);
right: 0;
transform: rotateY(90deg) translateZ(150px);
}
.left-shelf {
background-color: #6F4E37;
transform: rotateY(-90deg) translateZ(50px);
transform: rotateY(-90deg) translateZ(150px);
}
.front-shelf {

3
css/style.css
View File

@ -9,6 +9,8 @@ body {
background: url(../images/d7YslGq.gif);
line-height: 1.6;
font-size: 16px;
margin: 0;
padding: 0;
}
header {
@ -21,6 +23,7 @@ h1,h2,h3 {
.container {
background-color: white;
width: 85%;
height: 100vh;
padding: 20px 50px;
margin: 0 auto;
}

19
js/elements.js
View File

@ -44,9 +44,24 @@ class ShopCounter extends HTMLElement {
const wrapper = document.createElement("span");
wrapper.setAttribute("class", "wrapper");
const shelf = document.createElement("span")
shelf.setAttribute("class", "counter")
const counter = document.createElement("span")
counter.setAttribute("class", "counter")
const topshelf = counter.appendChild(document.createElement("div"));
topshelf.setAttribute("class", "top-shelf horiz-side");
const bottomshelf = counter.appendChild(document.createElement("div"));
bottomshelf.setAttribute("class", "bottom-shelf horiz-side");
const leftshelf = counter.appendChild(document.createElement("div"));
leftshelf.setAttribute("class", "left-shelf vert-side");
const rightshelf = counter.appendChild(document.createElement("div"));
rightshelf.setAttribute("class", "right-shelf vert-side");
const back = counter.appendChild(document.createElement("div"));
back.setAttribute("class", "back-shelf face");
const front = counter.appendChild(document.createElement("div"));
front.setAttribute("class", "front-shelf face");
wrapper.appendChild(counter);
shadow.appendChild(wrapper);
shadow.appendChild(style);