css交錯旋轉

2020/10/28 10:32:36 閱讀：2468 發布者：2468

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: hsl(240, 56%, 98%);
}

*,
*::after,
*::before {
box-sizing: border-box;
transform-style: preserve-3d;
}

:root {
--grey-color-1: #bdc3c7;
--grey-color-2: #95a5a6;
--grey-color-3: #7f8c8d;
}

@mixin cube($width, $height, $depth) {
&__front {
@include cube-front($width, $height, $depth);
}
&__back {
@include cube-back($width, $height, $depth);
}
&__right {
@include cube-right($width, $height, $depth);
}
&__left {
@include cube-left($width, $height, $depth);
}
&__top {
@include cube-top($width, $height, $depth);
}
&__bottom {
@include cube-bottom($width, $height, $depth);
}
.face {
position: absolute;
}
}

@mixin cube-front($width, $height, $depth) {
width: var($width);
height: var($height);
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(calc(calc(var(#{$depth}) * 2) - var(#{$height})));
}

@mixin cube-back($width, $height, $depth) {
width: var($width);
height: var($height);
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(calc(var(#{$width}) * -1))
translateY(calc(var(#{$height}) * -1));
}

@mixin cube-right($width, $height, $depth) {
width: calc(var(#{$depth}) * 2);
height: var($height);
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(var(#{$width})) translateX(calc(var(#{$depth}) * -2))
translateY(calc(var(#{$height}) * -1));
}

@mixin cube-left($width, $height, $depth) {
width: calc(var(#{$depth}) * 2);
height: var($height);
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(calc(var(#{$height}) * -1));
}

@mixin cube-top($width, $height, $depth) {
width: var($width);
height: calc(var(#{$depth}) * 2);
transform-origin: top left;
transform: translateZ(var($height));
}

@mixin cube-bottom($width, $height, $depth) {
width: var($width);
height: calc(var(#{$depth}) * 2);
transform-origin: top left;
transform: rotateY(180deg) translateX(calc(var(#{$width}) * -1));
}

.cube {
--cube-width: 12rem;
--cube-height: 12rem;
--cube-depth: 0.5rem;

@include cube(--cube-width, --cube-height, --cube-depth);

width: 12rem;
height: 0.5rem;
transform-origin: center center 6rem;
animation: spin 3s ease-in-out alternate infinite;

&__front {
background-color: var(--grey-color-1);
}
&__back {
background-color: var(--grey-color-3);
}
&__right {
background-color: var(--grey-color-1);
}
&__left {
background-color: var(--grey-color-2);
}
&__top {
background-color: var(--grey-color-3);
}
&__bottom {
background-color: var(--grey-color-2);
}
}

.spiral-tower {
display: grid;
grid-auto-flow: row;
transform: rotateX(-30deg) rotateY(45deg);

.cube {
@for $i from 1 through 48 {
&:nth-child(#{$i}) {
animation-delay: 0.015s * ($i - 1);
}
}
}
}

@keyframes spin {
0%,
15% {
transform: rotateY(0);
}

85%,
100% {
transform: rotateY(1turn);
}
}

上一篇防抖與節流

下一篇 HTML5沒用過的十個功能

css交錯旋轉

文章分類

相關新聞

熱門標簽