Question:
I made an example of layout on request, everything is cool and everything works, but there is a small BUT.
I want to get rid of the minus in the css variable. And this is what it looks like:
: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>
That is, if you simultaneously change –angle1 and –angle2, you get a simultaneous coaxial turn of the blocks, and here you can see this: https://codepen.io/topicstarter/pen/oKYBLq
But how to get rid of a minus in a variable? How to put this minus in
transform: rotate(var(--angle1)); so that there is no minus in the variable?
Answer:
Found by poking)
transform: rotate( calc(360deg - var(--angle2)) ); – you can use this instead of var(–angle1) and generally remove the last of the variables. Set the angle to just one.
: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>