css交錯(cuò)旋轉(zhuǎn)

2020/10/28 10:32:36 閱讀：2418 發(fā)布者：2418

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);
}
}

上一篇防抖與節(jié)流

下一篇 HTML5沒(méi)用過(guò)的十個(gè)功能

【微信掃一掃】

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

css交錯(cuò)旋轉(zhuǎn)

文章分類

相關(guān)新聞

熱門(mén)標(biāo)簽