126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<template>
|
|
<div class="w-96 m-6">
|
|
<atropos-component class="atropos game-box atropos-rotate-touch-scroll-y" rotate-touch="scroll-y" rotate-x-max="24"
|
|
rotate-y-max="24">
|
|
|
|
<div class="atropos-inner relative">
|
|
<div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-96 relative" data-atropos-offset="-8" />
|
|
<img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute bottom-0 inset-0 h-96 object-cover">
|
|
<img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 self-end justify-self-end p-4">
|
|
<img src="/logo.svg" data-atropos-offset="0" width="70%"
|
|
class="logo absolute inset-0 self-center justify-self-center">
|
|
<!-- <img src="/play.svg" width="20%" class="absolute play"> -->
|
|
</div>
|
|
<span class="game-box-t" />
|
|
<span class="game-box-r" />
|
|
<span class="game-box-b" />
|
|
<span class="game-box-l" />
|
|
</atropos-component>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const id = 'ES01A'
|
|
</script>
|
|
|
|
<style>
|
|
.game-box .logo {
|
|
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
|
|
}
|
|
|
|
.game-box {
|
|
--side-color: #004297;
|
|
--side-size: 32px;
|
|
aspect-ratio: 526 / 656;
|
|
}
|
|
|
|
.atropos-rotate {
|
|
position: relative;
|
|
}
|
|
|
|
.game-box .atropos-rotate:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: calc(100% + 8px);
|
|
height: calc(100% + 16px);
|
|
top: -8px;
|
|
background: #086ef4;
|
|
z-index: 1;
|
|
}
|
|
|
|
.atropos-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(0);
|
|
display: block;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.game-box-t,
|
|
.game-box-r,
|
|
.game-box-b,
|
|
.game-box-l {
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
/* display: none; */
|
|
}
|
|
|
|
.game-box-t {
|
|
width: calc(100% + 8px);
|
|
height: var(--side-size);
|
|
background: var(--side-color);
|
|
left: 0;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateX(90deg);
|
|
transform-origin: center top;
|
|
top: -8px;
|
|
transform: translateZ(-32px) rotateX(90deg);
|
|
transform-origin: center top;
|
|
}
|
|
|
|
.game-box-b {
|
|
width: calc(100% + 8px);
|
|
height: var(--side-size);
|
|
background: var(--side-color);
|
|
left: 0;
|
|
bottom: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateX(-90deg);
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.game-box-r {
|
|
width: var(--side-size);
|
|
height: calc(100% + 16px);
|
|
background: var(--side-color);
|
|
right: -8px;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateY(90deg);
|
|
transform-origin: right center;
|
|
}
|
|
|
|
.game-box-l {
|
|
width: var(--side-size);
|
|
height: calc(100% + 16px);
|
|
background: var(--side-color);
|
|
left: 0px;
|
|
top: -8px;
|
|
transform: translate3d(0, 0, -32px) rotateY(-90deg);
|
|
transform-origin: left center;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 10.4%;
|
|
background: #a5a5a5;
|
|
left: 0;
|
|
top: 9px;
|
|
}
|
|
}
|
|
</style> |