Fix offset angle

zumerlab · Mar 20, 2023 · 605ae85 · 605ae85
1 parent b0f4543
commit 605ae85
Show file tree

Hide file tree

Showing 6 changed files with 285 additions and 284 deletions.
diff --git a/css/index.css b/css/index.css
diff --git a/css/index.css.map b/css/index.css.map
diff --git a/dist/css/index.min.css b/dist/css/index.min.css
diff --git a/dist/css/index.min.css.map b/dist/css/index.min.css.map
diff --git a/index.html b/index.html
@@ -39,10 +39,10 @@
         <hr class="item line">
         <hr class="item line">
       </div>
-      <div class="ring-1 items-5 " style="background-color: aliceblue;">
+      <div class="ring-1 items-5 offset-180" style="background-color: rgb(131, 204, 35);">
         <div class="item s box">A</div>
         <div class="item s rounded">N</div>
-        <div class="item l"> 
+        <div class="item s"> D
       </div>
         <div class="item s">Y</div>
         <div class="item s">!</div>
@@ -86,6 +86,7 @@
       var el = document.querySelector(".minuto")
       var minuto = el.style.getPropertyValue("--angle")
       setInterval(() => {
+        minuto = minuto + 1.7
         el.style.setProperty("--angle", minuto++)
       }, 1000)
     </script>

diff --git a/src/index.scss b/src/index.scss
@@ -316,7 +316,7 @@
 
  @for $i from $min-items through $max-items {
    .items-#{$i}>.item {
-     --angle: calc((var(--offset-angle) + var(--arc)) / #{$i} * var(--direction));
+     --angle: calc((var(--arc) / #{$i})  * var(--direction));
    }
  }
 
@@ -335,11 +335,11 @@
        }
 
       .z-container>.ring-#{$i}> .item.#{$size}#{$class} {
-        transform: rotate(calc(var(--angle) * var(--item-number) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0) rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+        transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg * -1));
       }
 
       .z-container>.ring-#{$i}> .item.stationary.#{$size}#{$class} {
-        transform: rotate(calc(var(--angle) * var(--item-number) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0);
+        transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0);
       }
     }
    }