SCSS
html, body {
background-color: #212121;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
* {box-sizing: border-box;}
}
.canvas {
position: relative;
background: #212121;
width: 300px;
height: 300px;
margin: 100px;
padding: 50px 0;
}
.box {
overflow: hidden;
}
.box--outer {
padding: 5px;
position: relative;
width: 200px;
height: 200px;
margin:0 auto;
}
.box--inner {
width: 195px;
height: 195px;
background: #212121;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.95);
position: absolute;
z-index: 1;
text-align: center;
line-height: 195px;
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
color: #25C1BB;
text-transform: uppercase;
letter-spacing: 8px;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.box-rotate {
position: absolute;
width: 400px;
height: 400px;
top: -100px;
left: -100px;
transition: all .8s cubic-bezier(0.190, 1.000, 0.220, 1.000);
.quart {
width: 200px;
height: 200px;
position: absolute;
}
.quart--red {
top: 0;
left: 0;
background: #e74c3c;
}
.quart--green {
top: 0;
left: 200px;
background: #2ecc71;
}
.quart--blue {
top: 200px;
left: 200px;
background: #3498db;
}
.quart--yellow {
top: 200px;
left: 0;
background: #f1c40f;
}
}
.box--outer:hover {
cursor: pointer;
.box--inner {
width: 195px;
height: 195px;
transform: translateX(-50%) translateY(-50%) scale(1);
background: #313131;
}
.box-rotate {
transform: rotate(180deg);
}
}
