Good day dear. Faced a problem, it is impossible to arrange circles, whose coordinates are given as a percentage. Here is an example https://jsfiddle.net/cchp53jt/

$colorMain1: rgba(253,225,6, .5); $colorMain2: rgba(255,0,0, .5); @mixin gradient($top, $bottom, $direction: false) { @if $direction { background: $direction; /* Old browsers */ background: -moz-linear-gradient($direction, $top 0%, $bottom 100%); background: -webkit-linear-gradient($direction, $top 0%, $bottom 100%); background: -o-linear-gradient($direction, $top 0%, $bottom 100%); background: -ms-linear-gradient($direction, $top 0%, $bottom 100%); background: linear-gradient(to $direction, $top 0%, $bottom 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); /* IE6-9 */ } @else { background: $top; /* Old browsers */ background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top), color-stop(100%, $bottom)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, $top 0%, $bottom 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */ background: linear-gradient(to bottom, $top 0%, $bottom 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0); /* IE6-9 */ } } body{ width: 100%; height: 100vh; background-color: #000; } .bigBlock{ margin: 0; padding: 0; position: relative; width: 50%; height: 50%; border: 1px solid #fff; perspective: 2500px; z-index: 1; .circle{ position: absolute; width: calc(25%); height: 50%; border-radius: 50%; z-index: 20; } } .Left{ top: 75%; left: 75%; transform-origin: right center; @include gradient ($colorMain1, $colorMain2, right); @for $i from 2 through 4 { &:nth-child(#{$i}) { // animation: rotationCircle 900ms infinite; left: 75% - (12.5*$i); transform: scale(1 - 0.125* $i); } } } .Right{ top: 75%; left: 100%; transform-origin: right center; @include gradient ($colorMain1, $colorMain2, right); @for $i from 2 through 4 { &:nth-child(#{$i}) { left: 100% +(12.5*$i); transform: scale(1 - 0.125* $i); } } } 
  <div class="bigBlock"> <div class="circle Right"></div> <div class="circle Right"></div> <div class="circle Right"></div> <div class="circle Right"></div> <div class="circle Left"></div> <div class="circle Left"></div> <div class="circle Left"></div> <div class="circle Left"></div> </div>

I can’t understand why he doesn’t calculate the left circles, although I am asking the same kind of consistency as with the right ones, and if you leave ONLY circles with the class left, then it draws them.

    1 answer 1

    The problem is the nth-child account. Because you have 4 .Right blocks in the beginning, then the indexing of .Left will start with 5, i.e. enough to change

     .Left{ top: 75%; left: 75%; transform-origin: right center; @include gradient ($colorMain1, $colorMain2, right); @for $i from 2 through 4 { &:nth-child(#{$i+3}) { // <- смещение от .Right // animation: rotationCircle 900ms infinite; left: 75% - (12.5*$i); transform: scale(1 - 0.125* $i); } } }

    and everything will work