Сделал пример вёрстки по просьбе, всё круто и всё работает но есть маленькое НО.
Я хочу избавится от минуса в 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
calc(var(--angle1) * -1)