Enecss/src/view.scss

32 lines
563 B
SCSS
Raw Normal View History

2023-02-27 00:26:17 +00:00
// Rotating canvas view
.view-section {
position: fixed;
width: 11.11vw;
height: 11.11vh;
z-index: 0;
}
@for $i from 0 through 9 {
// view sections
$rotation-x: $i * 20deg - 80deg;
$rotation-y: 160deg - ($i * 40deg);
.view-top-#{$i} {
top: 11.11vh * $i;
}
.view-top-#{$i}:hover ~ section.scene {
--rotation-x: #{$rotation-x};
}
.view-left-#{$i} {
left: 11.11vw * $i;
}
.view-left-#{$i}:hover ~ section.scene {
--rotation-y: #{$rotation-y};
}
}