js实现滚动鼠标立方体盒子分解动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现滚动鼠标立方体盒子分解动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');


html {
    font-family: 'Rubik', sans-serif;
    font-size: 2vmin;
}


body {
    background: #CAD2C5;
}


.scroll-text {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 10;
}


.fake-content {
    height: 500vh;
}


.scene-example {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10rem;
    width: 15rem;
    transform: translateX(-50%) translateY(-50%);
    perspetive: 10rem;
}


@-webkit-keyframes move-6 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%) translateZ(-3rem);
    }
}


@keyframes move-6 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%) translateZ(-3rem);
    }
}


@-webkit-keyframes move-19 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(3rem);
    }
    to {   
        transform: rotateY(30deg) rotateX(20deg) translateX(400%) translateY(200%) translateZ(3rem);
    }
}


@keyframes move-19 {
    from {
        transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(3rem);
    }
    to {   
        transform: rotateY(30deg) rotateX(20deg) translateX(400%) translateY(200%) translateZ(3rem);
    }
}


@-webkit-keyframes move-37 {
    from {  
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(0) translateZ(9rem);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(-100%) translateZ(9rem);
    }
}


@keyframes move-37 {
    from {  
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(0) translateZ(9rem);
    }
    to {
        transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(-100%) translateZ(9rem);
    }
}


.small-cube {
    height: 3rem;
    width: 3rem;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(30deg) rotateX(20deg);
}


/* front */

.small-cube:nth-of-type(1) {
    z-index: 4;
}


.small-cube:nth-of-type(2) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%);
}


.small-cube:nth-of-type(3) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%);
}


.small-cube:nth-of-type(4) {
    z-index: 7;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%);
}


.small-cube:nth-of-type(5) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateY(100%);
}


.small-cube:nth-of-type(6) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(100%);
    -webkit-animation: move-6 4s ease-in-out infinite alternate;
            animation: move-6 4s ease-in-out infinite alternate;
}


.small-cube:nth-of-type(7) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(100%);
}


.small-cube:nth-of-type(8) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%);
}


.small-cube:nth-of-type(9) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateY(200%);
}


.small-cube:nth-of-type(10) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(200%);
}


.small-cube:nth-of-type(11) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(200%);
}


.small-cube:nth-of-type(12) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%);
}


.small-cube:nth-of-type(13) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateY(300%);
}


.small-cube:nth-of-type(14) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateY(300%);
}


.small-cube:nth-of-type(15) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateY(300%);
}


.small-cube:nth-of-type(16) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%);
}


/* right */

.small-cube:nth-of-type(17) {
    z-index: 6;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(3rem);
}


.small-cube:nth-of-type(18) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(3rem);
}


.small-cube:nth-of-type(19) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(3rem);
    -webkit-animation: move-19 5s ease-in-out infinite alternate;
            animation: move-19 5s ease-in-out infinite alternate;
}


.small-cube:nth-of-type(20) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(3rem);
}


.small-cube:nth-of-type(21) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(6rem);
}


.small-cube:nth-of-type(22) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(6rem);
}


.small-cube:nth-of-type(23) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(6rem);
}


.small-cube:nth-of-type(24) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(6rem);
}


/* top */

.small-cube:nth-of-type(25) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateZ(9rem);
}


.small-cube:nth-of-type(26) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(100%) translateZ(9rem);
}


.small-cube:nth-of-type(27) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(200%) translateZ(9rem);
}


.small-cube:nth-of-type(28) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateX(300%) translateY(300%) translateZ(9rem);
}


.small-cube:nth-of-type(29) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateZ(3rem);
}


.small-cube:nth-of-type(30) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(3rem);
}


.small-cube:nth-of-type(31) {
    z-index: 5;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(3rem);
}


.small-cube:nth-of-type(32) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateZ(6rem);
}


.small-cube:nth-of-type(33) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(6rem);
}


.small-cube:nth-of-type(34) {
    z-index: 4;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(6rem);
}


.small-cube:nth-of-type(35) {
    z-index: 1;
    transform: rotateY(30deg) rotateX(20deg) translateZ(9rem);
}


.small-cube:nth-of-type(36) {
    z-index: 2;
    transform: rotateY(30deg) rotateX(20deg) translateX(100%) translateZ(9rem);
}


.small-cube:nth-of-type(37) {
    z-index: 3;
    transform: rotateY(30deg) rotateX(20deg) translateX(200%) translateZ(9rem);
    -webkit-animation: move-37 3s ease-in-out infinite alternate;
            animation: move-37 3s ease-in-out infinite alternate;
}


.small-cube > .face {
    position: absolute;
    height: 3rem;
    width: 3rem;
}


/* right */
.small-cube > .face:nth-of-type(1) {
    transform-origin: 100% 0;
    transform: rotateY(90deg);
    background: #445747;
}


/* front */
.small-cube > .face:nth-of-type(2) {
    transform-origin: 100% 0;
    background: #84A98C;
}


/* top */
.small-cube > .face:nth-of-type(3) {
    transform-origin: 100% 0;
    transform: rotateX(90deg);
    background: #C9F2CF;
}
</style>

  


</head>

<body >
  <div class='fake-content'></div>
<div class='scroll-text'>Scroll &darr;&darr;&darr;</div>
<div class='scene-example'>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class='face'></div>
        <div class='face'></div>
        <div class='face'></div>
    </div>
    <div class='small-cube'>
        <div class=&#.........完整代码请登录后点击上方下载按钮下载查看