CSS Border-box
#example1 {
box-sizing: border-box;
}
Southern Right Whale
#example1 {
box-sizing: border-box;
}header, ul, nav, li, a /* other elements */{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;<style>
body {
background: #0005;
display: grid;
place-content: center;
min-height: 100vh;
overflow: hidden;
perspective: 800px;
}
.wrap {
position: relative;
margin: 0 auto;
display: grid;
place-content: center;
width: 50vw;
height: 50vw;
background: #0202;
transform-style: preserve-3d;
transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 1, 45deg);
// animation: spin 1s ease forwards infinite;
}
.side {
position: absolute;
transform-style: preserve-3d;
transform-origin: center;
width: 5rem;
height: 5rem;
background: #0005;
left: 50%;
top: 50%;
transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 0, 45deg);
}
.side:nth-child(1) {
transform: rotatey(0deg) translate(-50%, -50%) translate3d(0, 0, -5rem);
background: hsla(50, 60%, 60%, 1);
}
.side:nth-child(2) {
transform: translate(-50%, -50%) translate3d(0, 50%, -2.5rem)
rotate3d(1, 0, 0, 90deg);
background: hsla(100, 60%, 60%, 1);
}
.side:nth-child(3) {
transform: translate(-50%, -50%) translate3d(0, -50%, -2.5rem)
rotate3d(1, 0, 0, -90deg);
background: hsla(140, 60%, 60%, 1);
}
.side:nth-child(4) {
transform: translate(-50%, -50%) translate3d(50%, 0, -2.5rem)
rotate3d(0, 1, 0, 90deg);
background: hsla(180, 60%, 60%, 1);
}
.side:nth-child(5) {
transform: translate(-50%, -50%) translate3d(-50%, 0, -2.5rem)
rotate3d(0, 1, 0, -90deg);
background: hsla(210, 60%, 60%, 1);
}
.side:nth-child(6) {
transform: rotatex(0deg) translate(-50%, -50%) translate3d(0, 0, 0rem)
rotate3d(0, 0, 0, -90deg);
background: hsla(250, 60%, 60%, 1);
}
@keyframes spin {
to {
transform: translate(-50%, -50%) translate3d(0, 0, 0)
rotate3d(1, 0, 0, 45deg);
}
}
</style>
//////// HTML
<div class="wrap">
<div class="side a"></div>
<div class="side b"></div>
<div class="side c"></div>
<div class="side d"></div>
<div class="side e"></div>
<div class="side f"></div>
</div>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}