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

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

代码语言：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%);
}

.........完整代码请登录后点击上方下载按钮下载查看