gkucmierz/rubic-cube
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Resize cube to 300px (1.5x original size)
All checks were successful
Deploy to Production / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-15 21:13:41 +01:00
parent 2c6b1ad966
commit d7df249c23
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/main.vue
View File

@@ -95,10 +95,10 @@ const cubeStyle = computed(() => ({
} }
.container { .container {
width: 200px; width: 300px;
height: 200px; height: 300px;
perspective: 600px; perspective: 900px;
margin: 60px auto; margin: 90px auto;
cursor: grab; cursor: grab;
user-select: none; user-select: none;
} }
@@ -109,16 +109,16 @@ const cubeStyle = computed(() => ({
.cube { .cube {
position: relative; position: relative;
width: 200px; width: 300px;
height: 200px; height: 300px;
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.face { .face {
width: 200px; width: 300px;
height: 200px; height: 300px;
background: #000; background: #000;
padding: 6px; padding: 9px;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
opacity: 0.9; opacity: 0.9;
@@ -128,7 +128,7 @@ const cubeStyle = computed(() => ({
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
gap: 6px; gap: 9px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@@ -137,7 +137,7 @@ const cubeStyle = computed(() => ({
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--sticker-color); background: var(--sticker-color);
border-radius: 6px; border-radius: 9px;
} }
.top { --sticker-color: #ffffff; } .top { --sticker-color: #ffffff; }
@@ -148,27 +148,27 @@ const cubeStyle = computed(() => ({
.right { --sticker-color: #ff5800; } .right { --sticker-color: #ff5800; }
.front { .front {
transform: translateZ(100px); transform: translateZ(150px);
} }
.back { .back {
transform: translateZ(-100px) rotateY(180deg); transform: translateZ(-150px) rotateY(180deg);
} }
.left { .left {
transform: translateX(-100px) rotateY(-90deg); transform: translateX(-150px) rotateY(-90deg);
} }
.right { .right {
transform: translateX(100px) rotateY(90deg); transform: translateX(150px) rotateY(90deg);
} }
.top { .top {
transform: translateY(-100px) rotateX(90deg); transform: translateY(-150px) rotateX(90deg);
} }
.bottom { .bottom {
transform: translateY(100px) rotateX(-90deg); transform: translateY(150px) rotateX(-90deg);
} }
</style> </style>