Как избавится от минуса в переменной?

Question

Сделал пример вёрстки по просьбе, всё круто и всё работает но есть маленькое НО.

Я хочу избавится от минуса в css переменной.И вот как это выглядит:

:root {
  --wrap: 500px;   /* размер wrap-ui */
  --radius1: 140px; /* первая большая обводка */
  --radius2: 120px; /* вторая обводка */
  --item: 90px;  /* квадрат в центре 3 */
  --item7: 70px; /* первые квадраты от центра 2 */
  --item5: 50px;  /* крайние квадраты 1 */
  --angle1: -35deg;  /* первый угол */
  --angle2: 35deg;  /* второй угол */
  --scale1: 0.8;  /* scaling для 2*/
  --scale2: 0.6;  /* scaling для 1*/
  --noscale: 1.1;  /* scaling для 3*/
}
html,
body {
  margin: 0;
  padding: 0;
  user-select: none;
}
.wrap-ui {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--wrap);
  height: var(--wrap);
  border: 1px solid transparent;
  position: relative;
  margin: auto;
}
.ui {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(var(--angle1));
}
.ui-component:nth-of-type(1),
.ui-component:nth-of-type(5) {
  width: var(--item5);
  height: var(--item5);
  opacity: 0.5;
  transform: rotate(var(--angle2))scale(var(--scale2));
}
.ui-component:nth-of-type(2),
.ui-component:nth-of-type(4) {
  width: var(--item7);
  height: var(--item7);
  opacity: 0.7;
  transform: rotate(var(--angle2))scale(var(--scale1));
}
.ui-component:nth-of-type(3) {
  width: var(--item);
  height: var(--item);
  transform: rotate(var(--angle2))scale(var(--noscale));
}
.ui-component {
  background: #fff;
  /* цвет ui без ромба */
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle1,
.circle2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  border-radius: 50%;
}
.circle1 {
  width: var(--radius1);
  height: var(--radius1);
}
.circle2 {
  width: var(--radius2);
  height: var(--radius2);
}
.clip {
  display: block;
  max-width: 90px;
  /* clip-path нарисован под этот размер */
  clip-path: url(#cp);
}

<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
     <defs>
  <clipPath id="cp">
    <path d="M20,0 70,0 90,30 90,60 70,90 20,90 0,60 0,30"/> 
     </clipPath>
     </defs>
</svg>

<div class="wrap-ui">
  <div class="ui">
    <div class="ui-component">
      <img src="http://placehold.it/400/ccf" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/cfc" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/fcc" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/ccd" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/cdc" alt="img" class="clip">
    </div>
  </div>
  <div class="circle1"></div>
  <div class="circle2"></div>
</div>

</div>

Т.е если одновременно менять --angle1 и --angle2 получается одновременный соосный разворот блоков и здесь в этом можно убедиться: https://codepen.io/topicstarter/pen/oKYBLq

Но как избавиться от минуса в переменной? Как этот минус поставить в

transform: rotate(var(--angle1)); что бы в переменной не было минуса ?

_< прошелся по коду... потыкал... т.е. с минусом всё в порядке, а просто не хочется его там видеть?) Так -35deg можно заменить на 325deg — OPTIMUS PRIME, Jul 27 '19 at 04:15
@OPTIMUSPRIME видишь какая штука - удобно менять угол не пересчитывая — Резидент Казахстана, Jul 27 '19 at 04:17

score 6 · Accepted Answer · answered Jul 27 '19 at 04:23

Нашлось методом тыка)

transform: rotate( calc(360deg - var(--angle2)) ); — можно использовать это вместо var(--angle1) и вообще убрать последнее из переменных. Задать угол только одной.

:root{
 --wrap:    500px;  /* размер wrap-ui */
 --radius1: 140px;  /* первая большая обводка */
 --radius2: 120px;  /* вторая обводка */
 --item:    90px;   /* квадрат в центре 3 */
 --item7:   70px;   /* первые квадраты от центра 2 */
 --item5:   50px;   /* крайние квадраты 1 */
 --angle2:  60deg;  /* второй угол */
 --scale1:  0.8;    /* scaling для 2*/
 --scale2:  0.6;    /* scaling для 1*/
 --noscale: 1.1;    /* scaling для 3*/
}
html,body{
 margin: 0;
 padding: 0;
 user-select: none;
}
.wrap-ui{
 display: flex;
 justify-content: center;
 align-items: center;
 width: var(--wrap);
 height: var(--wrap);
 border: 1px solid transparent;
 position: relative;
 margin: auto;
}
.ui{
 width: 100%;
 height: 100px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 transform: rotate(calc(360deg - var(--angle2)));
}
.ui-component:nth-of-type(1),
.ui-component:nth-of-type(5){
 width: var(--item5);
 height: var(--item5);
 opacity: 0.5;
 transform: rotate(var(--angle2))scale(var(--scale2));
}
.ui-component:nth-of-type(2),
.ui-component:nth-of-type(4){
 width: var(--item7);
 height: var(--item7);
 opacity: 0.7;
 transform: rotate(var(--angle2))scale(var(--scale1));
}
.ui-component:nth-of-type(3){
 width: var(--item);
 height: var(--item);
 transform: rotate(var(--angle2))scale(var(--noscale));
}
.ui-component{
 background: #fff; /* цвет ui без ромба */
 display: flex;
 justify-content: center;
 align-items: center;
}
.circle1,.circle2{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 border: 1px solid red;
 border-radius: 50%;
}
.circle1{
 width: var(--radius1);
 height: var(--radius1);
}
.circle2{
 width: var(--radius2);
 height: var(--radius2);
}
.clip{
 display: block;
 max-width: 90px; /* clip-path нарисован под этот размер */
 clip-path: url(#cp);
}

<svg viewBox="0 0 90 90" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="0" height="0">
     <defs>
  <clipPath id="cp">
    <path d="M20,0 70,0 90,30 90,60 70,90 20,90 0,60 0,30"/> 
     </clipPath>
     </defs>
</svg>

<div class="wrap-ui">
  <div class="ui">
   <div class="ui-component">
    <img src="http://placehold.it/400/ccf" alt="img" class="clip">
   </div>
   <div class="ui-component">
       <img src="http://placehold.it/400/cfc" alt="img" class="clip">
   </div>
   <div class="ui-component">
    <img src="http://placehold.it/400/fcc" alt="img" class="clip">
   </div>
   <div class="ui-component">
    <img src="http://placehold.it/400/ccd" alt="img" class="clip">
   </div>
   <div class="ui-component">
    <img src="http://placehold.it/400/cdc" alt="img" class="clip">
   </div>
  </div>
  <div class="circle1"></div>
  <div class="circle2"></div>
</div>

пока писал ответ, уже родился такой же =) держи + — Stranger in the Q, Jul 27 '19 at 04:26
круто - до меня не дошло что то ...плюс однозначно — Резидент Казахстана, Jul 27 '19 at 04:27

score 3 · Answer 2 · answered Jul 27 '19 at 04:31

:root {
  --angle1: -35deg;
  --angle2: calc(-1 * var(--angle1)); 
}

:root {
  --wrap: 500px;   /* размер wrap-ui */
  --radius1: 140px; /* первая большая обводка */
  --radius2: 120px; /* вторая обводка */
  --item: 90px;  /* квадрат в центре 3 */
  --item7: 70px; /* первые квадраты от центра 2 */
  --item5: 50px;  /* крайние квадраты 1 */
  --angle1: -35deg;  /* первый угол */
  --angle2: calc(-1 * var(--angle1));  /* второй угол */
  --scale1: 0.8;  /* scaling для 2*/
  --scale2: 0.6;  /* scaling для 1*/
  --noscale: 1.1;  /* scaling для 3*/
}
html,
body {
  margin: 0;
  padding: 0;
  user-select: none;
}
.wrap-ui {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--wrap);
  height: var(--wrap);
  border: 1px solid transparent;
  position: relative;
  margin: auto;
}
.ui {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(var(--angle1));
}
.ui-component:nth-of-type(1),
.ui-component:nth-of-type(5) {
  width: var(--item5);
  height: var(--item5);
  opacity: 0.5;
  transform: rotate(var(--angle2))scale(var(--scale2));
}
.ui-component:nth-of-type(2),
.ui-component:nth-of-type(4) {
  width: var(--item7);
  height: var(--item7);
  opacity: 0.7;
  transform: rotate(var(--angle2))scale(var(--scale1));
}
.ui-component:nth-of-type(3) {
  width: var(--item);
  height: var(--item);
  transform: rotate(var(--angle2))scale(var(--noscale));
}
.ui-component {
  background: #fff;
  /* цвет ui без ромба */
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle1,
.circle2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  border-radius: 50%;
}
.circle1 {
  width: var(--radius1);
  height: var(--radius1);
}
.circle2 {
  width: var(--radius2);
  height: var(--radius2);
}
.clip {
  display: block;
  max-width: 90px;
  /* clip-path нарисован под этот размер */
  clip-path: url(#cp);
}

<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
     <defs>
  <clipPath id="cp">
    <path d="M20,0 70,0 90,30 90,60 70,90 20,90 0,60 0,30"/> 
     </clipPath>
     </defs>
</svg>

<div class="wrap-ui">
  <div class="ui">
    <div class="ui-component">
      <img src="http://placehold.it/400/ccf" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/cfc" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/fcc" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/ccd" alt="img" class="clip">
    </div>
    <div class="ui-component">
      <img src="http://placehold.it/400/cdc" alt="img" class="clip">
    </div>
  </div>
  <div class="circle1"></div>
  <div class="circle2"></div>
</div>

</div>

score 1 · Answer 3 · answered Aug 02 '19 at 12:06

1

Еще проще:

transform:rotate(calc(0deg - var(--angle1)));

answered Aug 02 '19 at 12:06

Инквизитор

5,955

Как избавится от минуса в переменной?

3 Answers3