css交錯旋轉

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

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沒用過的十個功能

日本一卡精品视频免费丨国产午夜片无码区在线播放丨国产精品成人久久久久久久丨国产亚洲日韩av在线播放不卡丨亚洲日韩av无码

css交錯旋轉

文章分類

相關新聞

熱門標簽