too many shapes
This commit is contained in:
parent
dda401d147
commit
8767cd544d
|
@ -1,6 +1,71 @@
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 100%;
|
width: 800px;
|
||||||
height: 400px;
|
height: 300px;
|
||||||
display: block;
|
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);
|
||||||
}
|
}
|
|
@ -26,6 +26,7 @@
|
||||||
height: 100px;
|
height: 100px;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
}
|
}
|
||||||
.top-shelf {
|
.top-shelf {
|
||||||
background-color: #DAA06D;
|
background-color: #DAA06D;
|
||||||
|
@ -39,13 +40,12 @@
|
||||||
|
|
||||||
.right-shelf {
|
.right-shelf {
|
||||||
background-color: #6F4E37;
|
background-color: #6F4E37;
|
||||||
transform: rotateY(90deg) translateZ(50px);
|
transform: rotateY(90deg) translateZ(150px);
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-shelf {
|
.left-shelf {
|
||||||
background-color: #6F4E37;
|
background-color: #6F4E37;
|
||||||
transform: rotateY(-90deg) translateZ(50px);
|
transform: rotateY(-90deg) translateZ(150px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.front-shelf {
|
.front-shelf {
|
||||||
|
|
|
@ -9,6 +9,8 @@ body {
|
||||||
background: url(../images/d7YslGq.gif);
|
background: url(../images/d7YslGq.gif);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
@ -21,6 +23,7 @@ h1,h2,h3 {
|
||||||
.container {
|
.container {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
height: 100vh;
|
||||||
padding: 20px 50px;
|
padding: 20px 50px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,9 +44,24 @@ class ShopCounter extends HTMLElement {
|
||||||
|
|
||||||
const wrapper = document.createElement("span");
|
const wrapper = document.createElement("span");
|
||||||
wrapper.setAttribute("class", "wrapper");
|
wrapper.setAttribute("class", "wrapper");
|
||||||
const shelf = document.createElement("span")
|
const counter = document.createElement("span")
|
||||||
shelf.setAttribute("class", "counter")
|
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(wrapper);
|
||||||
shadow.appendChild(style);
|
shadow.appendChild(style);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue