From d3d71fab2d811bf713f28f4e80cea05cb5319c53 Mon Sep 17 00:00:00 2001 From: BOTAlex Date: Thu, 4 Jan 2024 22:17:19 +0100 Subject: [PATCH] sync --- src/lib/Cube3D.css | 86 ------------------------------------------- src/lib/Cube3D.svelte | 76 +++++++++++++++++++++++++++++++++++--- 2 files changed, 71 insertions(+), 91 deletions(-) diff --git a/src/lib/Cube3D.css b/src/lib/Cube3D.css index 287ba6b..e69de29 100644 --- a/src/lib/Cube3D.css +++ b/src/lib/Cube3D.css @@ -1,86 +0,0 @@ -/* .rotate1{ - transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); -} */ -/* demo: https://codepen.io/mrosati84/pen/kWwXLg */ - -#cube-3d-container { - width: var(--cube-size); - height: var(--cube-size); - position: relative; - perspective: 500px; - -moz-perspective: 1000px; - padding: 25px; -} - -#cube3d { - width: 100%; - height: 100%; - position: absolute; - transform-style: preserve-3d; - transition: transform 1s cubic-bezier(0,1.32,0,.92); -} - -#cube3d div { - display: block; - border: none; - line-height: var(--cube-size); - text-align: center; - font-size: 65px; -} - -.cube-sides { - position: absolute; - width: var(--cube-size); - height: var(--cube-size); - - text-decoration: underline; - text-underline-offset: 24px; -} - -/* #front { -} */ -/* -#back { - background: var(--cube-color); -} - -#right { - background: var(--cube-color); -} - -#left { - background: var(--cube-color); -} - -#top { - background: var(--cube-color); -} - -#bottom { - background: var(--cube-color); -} */ - -#cube3d #front { - transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) ); - -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) ); -} -#cube3d #back { - transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg); - -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg); -} -#cube3d #right { - transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) ); - -moz-transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) ); -} -#cube3d #left { - transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) ); - -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) ); -} -/* #cube3d #top { - transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) ); - -moz-transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) ); -} -#cube3d #bottom { - transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) ); - -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) ); -} */ \ No newline at end of file diff --git a/src/lib/Cube3D.svelte b/src/lib/Cube3D.svelte index 0ac03a8..13bbe2d 100644 --- a/src/lib/Cube3D.svelte +++ b/src/lib/Cube3D.svelte @@ -73,8 +73,6 @@
-
+
cube side texture

@@ -149,6 +211,10 @@ +

+ + +
3D ground plane