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

#css3

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

Я хочу избавится от минуса в 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);
}



  

    

      
    
    

      
    
    

      
    
    

      
    
    

      
    
  
  

  

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

Ответы

Ответ 1

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

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);
}



  

  	

  		
  	
  	

  	    
  	
  	

  		
  	
  	

  		
  	
  	

  		
  	
  
  

  




Ответ 2

: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);
}