5

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

Я хочу избавится от минуса в 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)); что бы в переменной не было минуса ?

3
  • >_< прошелся по коду... потыкал... т.е. с минусом всё в порядке, а просто не хочется его там видеть?) Так -35deg можно заменить на 325deg 27 июл 2019 в 4:15
  • @OPTIMUSPRIME видишь какая штука - удобно менять угол не пересчитывая 27 июл 2019 в 4:17
  • @MaximLensky calc(var(--angle1) * -1) 27 июл 2019 в 4:26

3 ответа 3

6

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

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>
	

2
  • пока писал ответ, уже родился такой же =) держи + 27 июл 2019 в 4:26
  • круто - до меня не дошло что то ...плюс однозначно 27 июл 2019 в 4:27
3
: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>

0
1

Еще проще:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.