pug+scss实现三维魔方旋转动画效果代码
代码语言：html
所属分类：动画
代码描述：pug+scss实现三维魔方旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style type = 'text/scss'>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
background: #434343;
perspective: 90vh;
* {
transform-style: preserve-3d;
box-sizing: border-box;
}
}
.cube {
--cube-size: 40vh;
--color-1: #413B3B;
--color-2: #FCE932;
@media screen and (orientation: portrait) {
--cube-size: 40vw;
}
position: relative;
width: calc(var(--cube-size) + 20vh);
height: calc(var(--cube-size) + 20vh);
transform: rotateX(-20deg) rotateY(20deg) rotateZ(0deg);
animation: animCube 40s infinite alternate ease-in-out;
border: 1px solid rgba(white, 0);
background-color: rgba(white, 0);
border-radius: 1vh;
transition: border 250ms ease-in-out, background-color 250ms ease-in-out;
&:active {
border: 1px solid rgba(white, .1);
background-color: rgba(white, .03);
}
}
.block {
--block-size: calc(var(--cube-size) / 3);
--block-x: calc(var(--block-size) / 2 * -1); // -50%;
--block-y: calc(var(--block-size) / 2 * -1); // -50%;
--block-z: 0;
--block-rx: 0deg;
--block-ry: 0deg;
--block-rz: 0deg;
--block-radius: 0px;
--block-filter: 0px;
position: absolute;
top: 50%;
left: 50%;
width: var(--block-size);
height: var(--block-size);
transform-origin: 0 0;
transform:
rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(var(--block-rz))
translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z));
transition: transform 1s ease-in-out;
@for $i from 1 through 27 {
&:nth-child(#{$i}) {
animation: animBlock#{$i} 10s infinite alternate ease-in-out;
}
}
&:hover {
--block-radius: 3vh;
--block-filter: sepia(50%);
@media screen and (orientation: portrait) {
--block-radius: 3vw;
}
}
&:nth-child(-n + 9) { // 1 - 9
--block-z: var(--block-size);
}
&:nth-child(n + 19) { // 19 - 27
--block-z: calc(var(--block-size) * -1);
}
&:nth-child(n + 1):nth-child(-n + 3), // 1 - 3
&:nth-child(n + 10):nth-child(-n + 12),
&:nth-child(n + 19):nth-child(-n + 21) {
--block-y: calc(var(--block-size) * -1.5);
}
&:nth-child(n + 7):nth-child(-n + 9),
&:nth-child(n + 16):nth-child(-n + 18),
&:nth-child(n + 25):nth-child(-n + 27) {
--block-y: calc(var(--block-size) * .5);
}
&:nth-child(3n - 2) {
--block-x: calc(var(--block-size) * -1.5);
}
&:nth-child(3n) {
--block-x: calc(var(--block-size) * .5);
}
&__side {
--side-size: var(--block-size);
// --side-size: calc(var(--block-size) - 10px);
position: absolute;
top: 0;
left: 0;
width: var(--side-size);
height: var(--side-size);
background: var(--color-1);
border-radius: var(--block-radius);
transition: filter 500ms ease-in-out, border-radius 500ms ease-in-out;
filter: none;
&:hover {
filter: var(--block-filter);
}
&:nth-child(1) {
transform: translateZ(calc(var(--side-size) / 2));
}
&:nth-child(2) {
transform: rotateY(90deg) translateZ(calc(var(--side-size) / 2));
}
&:nth-child(3) {
transform: rotateY(-180deg) translateZ(calc(var(--side-size) / 2));
}
&:nth-child(4) {
transform: rotateY(-90deg) translateZ(calc(var(--side-size) / 2));
}
&:nth-child(5) {
background: var(--color-2);
transform-origin: 0 0;
transform: rotateX(90deg) translateY(-50%);
}
&:nth-child(6) {
background: var(--color-2);
transform-origin: 0 100%;
transform: rotateX(90deg) translateY(50%);
}
}
}
@keyframes animCube {
0% { transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg); }
25% { transform: rotateX(20deg) rotateY(20deg) rotateZ(-90deg); }
50% { transform: rotateX(20deg) rotateY(-120deg) rotateZ(0deg); }
75% { transform: rotateX(-120deg) rotateY(-20deg) rotateZ(0deg); }
100% { transform: rotateX(-20deg) rotateY(20deg) rotateZ(0deg); }
}
@keyframes animBlock1 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock2 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock3 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock4 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock5 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock6 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(-180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(-180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock7 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock8 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock9 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
75% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(-180deg) rotateY(-90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock10 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock11 {
25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
100% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(-180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}
@keyframes animBlock12 {
25% { transform: rotateX(var(-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0