fix initial angle

zumerlab · Mar 20, 2023 · 4ec5992 · 4ec5992
1 parent 74b7183
commit 4ec5992
Show file tree

Hide file tree

Showing 6 changed files with 521 additions and 519 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
@@ -13,7 +13,11 @@
         <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: -90">
         <hr class="item line minuto" style="width: 150px; height: 2px; border:1px solid red;  --angle: -45">
       </div>
-      <div class="ring-2 items-12">
+      <div class="ring-2 items-12 offset-270">
+        <div class="item xs">12</div>
+        <div class="item xs">1</div>
+        <div class="item xs">2</div>
+        <div class="item xs">3</div>
         <div class="item xs">4</div>
         <div class="item xs">5</div>
         <div class="item xs">6</div>
@@ -22,10 +26,8 @@
         <div class="item xs">9</div>
         <div class="item xs">10</div>
         <div class="item xs">11</div>
-        <div class="item xs">12</div>
-        <div class="item xs">1</div>
-        <div class="item xs">2</div>
-        <div class="item xs">3</div>
+
+
       </div>
     </div>
     <div class="z-container" >
@@ -39,7 +41,7 @@
         <hr class="item line">
         <hr class="item line">
       </div>
-      <div class="ring-1 items-5" style="background-color: rgb(131, 204, 35);">
+      <div class="ring-1 items-5 offset-270 ccw" style="background-color: rgb(131, 204, 35);">
         <div class="item s box">A</div>
         <div class="item s rounded">N</div>
         <div class="item s"> D

diff --git a/src/index.scss b/src/index.scss
@@ -335,18 +335,18 @@
        }
 
       .z-container>.ring-#{$i}> .item.#{$size}#{$class} {
-        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));
+        transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
       }
 
       .z-container>.ring-#{$i}> .item.stationary.#{$size}#{$class} {
-        transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0);
+        transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius) * #{$i} #{$math}), 0);
       }
     }
    }
 
  }
  .core >.item {
-   transform:  rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg))
+   transform:  rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg))
  }
  @for $i from $min-rings through $max-rings {
 
@@ -370,12 +370,12 @@
 
        .item.#{$size}>.ring-#{$i}>.item#{$class} {
          --x: calc((#{$var} / 2 * var(--ring-#{$i}-factor)) #{$math});
-         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg)) translate(var(--x), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * -1deg));
+         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--x), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
        }
 
        .item.#{$size}>.ring-#{$i}> .item.stationary#{$class}  {
          --x: calc((#{$var} / 2 * var(--ring-#{$i}-factor)) #{$math});
-         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle)) * 1deg)) translate(var(--x), 0);
+         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--x), 0);
        }
      }
    }