Trying to get more accurate cylinders (it's not perfect).

README.md

@@ -317,7 +317,7 @@ Example:
 
 ## Examples
 
-There is a sample cube example which makes use of practically everything you saw before in the `examples/cube` folder.
+There is a sample cube example which makes use of practically everything you saw before in the `examples/cube` folder. [Test it out online.](https://cdn.githubraw.com/Ad5001/Enecss/example/examples/cube/cube.html)
 
 ## F.A.Q.
 

src/elements/circular/cylinder.scss

@@ -10,7 +10,7 @@
     
     & > .strip {
         position: absolute;
-        width: calc(2 * var(--PI) * var(--pradius) / var(--pstripcount));
+        width: calc(2 * 3.18 * var(--pradius) / var(--pstripcount));
         height: var(--height, 100px);
         background: white;
     }
@@ -21,6 +21,6 @@
     }
         
     @for $i from 1 to 90 {
-        & > .strip-#{$i} { transform: rotateY(calc($i * (360deg / var(--pstripcount)))) translateZ(var(--pradius)); }
+        & > .strip-#{$i} { transform: rotateY(calc(($i - 1) * (360deg / var(--pstripcount)))) translateZ(var(--pradius)); }
     }
 }

src/elements/figure.scss

@@ -21,6 +21,7 @@
         margin-block-end: 0;
         position: absolute;
         pointer-events: none;
+        backface-visibility: hidden;
     }
     
     & .position-at-center {

src/ui/tooltips.scss

@@ -1,9 +1,14 @@
 
 .scene > figure.root figure.interactive:hover > .tooltip {
-    opacity: 0.8
+    opacity: 0.8;
+    
+    &:hover {
+        opacity: 0;
+        pointer-events: none;
+    }
 }
 
-.tooltip {
+.scene > figure.root .tooltip {
     width: fit-content;
     padding: 5px;
     opacity: 0;

src/view.scss

@@ -11,13 +11,13 @@
 @for $i from 0 through 9 {
     // view sections
     $rotation-x: $i * 20deg - 80deg;
-    $rotation-y: 160deg - ($i * 40deg);
+    $rotation-y: 200deg - ($i * 40deg);
         
     .view-top-#{$i} {
         top: 11.11vh * $i;
     }
     
-    .view-top-#{$i}:hover ~ section.scene {
+    .view-top-#{9-$i}:hover ~ section.scene {
         --rotation-x: #{$rotation-x};
     }
     
@@ -25,7 +25,7 @@
         left: 11.11vw * $i;
     }
     
-    .view-left-#{$i}:hover ~ section.scene {
+    .view-left-#{9-$i}:hover ~ section.scene {
         --rotation-y: #{$rotation-y};
     }
 }