diff --git a/src/components/ViewCube.tsx b/src/components/ViewCube.tsx
index 67dfe56..9a05eac 100644
--- a/src/components/ViewCube.tsx
+++ b/src/components/ViewCube.tsx
@@ -80,25 +80,15 @@ export function ViewCube() {
       {/* Cubo 3D Visual */}
       <div className="relative h-20 w-20 flex items-center justify-center my-2 group">
         {/* Container do Cubo Isométrico */}
-        <div 
-          className="h-14 w-14 transition-transform duration-500 ease-out"
-          style={{
-            transformStyle: 'preserve-3d',
-            transform: 'rotateX(-30deg) rotateY(45deg)',
-          }}
-        >
+        <div className="h-14 w-14 transition-transform duration-500 ease-out viewcube-wrapper">
           {/* TOPO (Z+) */}
           <div
             onClick={() => alignToFace('TOPO')}
             onMouseEnter={() => setHoveredFace('TOPO')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-top ${
               hoveredFace === 'TOPO' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-800/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'rotateX(90deg) translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             TOPO
           </div>
@@ -108,13 +98,9 @@ export function ViewCube() {
             onClick={() => alignToFace('FRENTE')}
             onMouseEnter={() => setHoveredFace('FRENTE')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-front ${
               hoveredFace === 'FRENTE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-700/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             FRENTE
           </div>
@@ -124,13 +110,9 @@ export function ViewCube() {
             onClick={() => alignToFace('DIREITA')}
             onMouseEnter={() => setHoveredFace('DIREITA')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-right ${
               hoveredFace === 'DIREITA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'rotateY(90deg) translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             DIR
           </div>
@@ -140,13 +122,9 @@ export function ViewCube() {
             onClick={() => alignToFace('ESQUERDA')}
             onMouseEnter={() => setHoveredFace('ESQUERDA')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-left ${
               hoveredFace === 'ESQUERDA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'rotateY(-90deg) translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             ESQ
           </div>
@@ -156,13 +134,9 @@ export function ViewCube() {
             onClick={() => alignToFace('ATRÁS')}
             onMouseEnter={() => setHoveredFace('ATRÁS')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-back ${
               hoveredFace === 'ATRÁS' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-750/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'rotateY(180deg) translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             ATRÁS
           </div>
@@ -172,13 +146,9 @@ export function ViewCube() {
             onClick={() => alignToFace('BASE')}
             onMouseEnter={() => setHoveredFace('BASE')}
             onMouseLeave={() => setHoveredFace(null)}
-            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${
+            className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-bottom ${
               hoveredFace === 'BASE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-900/80 text-zinc-300'
             }`}
-            style={{
-              transform: 'rotateX(-90deg) translateZ(28px)',
-              backfaceVisibility: 'hidden',
-            }}
           >
             BASE
           </div>
diff --git a/src/index.css b/src/index.css
index df98860..4aadc75 100644
--- a/src/index.css
+++ b/src/index.css
@@ -92,4 +92,39 @@
       linear-gradient(90deg, hsl(220 14% 18% / 0.5) 1px, transparent 1px);
     background-size: 20px 20px;
   }
+
+  .viewcube-wrapper {
+    transform-style: preserve-3d;
+    transform: rotateX(-30deg) rotateY(45deg);
+  }
+
+  .viewcube-face-top {
+    transform: rotateX(90deg) translateZ(28px);
+    backface-visibility: hidden;
+  }
+
+  .viewcube-face-front {
+    transform: translateZ(28px);
+    backface-visibility: hidden;
+  }
+
+  .viewcube-face-right {
+    transform: rotateY(90deg) translateZ(28px);
+    backface-visibility: hidden;
+  }
+
+  .viewcube-face-left {
+    transform: rotateY(-90deg) translateZ(28px);
+    backface-visibility: hidden;
+  }
+
+  .viewcube-face-back {
+    transform: rotateY(180deg) translateZ(28px);
+    backface-visibility: hidden;
+  }
+
+  .viewcube-face-bottom {
+    transform: rotateX(-90deg) translateZ(28px);
+    backface-visibility: hidden;
+  }
 }