怎么用HTML+CSS+JS制作3D炫酷魔方
这篇文章主要介绍了怎么用HTML+CSS+JS制作3D炫酷魔方的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用HTML+CSS+JS制作3D炫酷魔方文章都会有所收获，下面我们一起来看看吧。
图片效果
HTML结构代码
<html><head><metacharset="utf-8"><scriptid="jqbb"src="libs.baidu/jquery/1.11.1/jquery.min.js"></script><styletype="text/css">html,body{width:100%;height:100%;margin:0;padding:0;}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-webkit-animation-timing-function:cubic-bezier(0.5,0,0,1)!important;animation-timing-function:cubic-bezier(0.5,0,0,1)!important;}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;perspective:1000px;background:-webkit-gradient(linear,lefttop,rightbottom,from(#a4c5c7),to(#2D3F48));background:linear-gradient(tobottomright,#a4c5c7,#2D3F48);}body:hover>label,body:hover>input{opacity:1;}label,#shadows{position:fixed;top:2vmin;opacity:0.5;}label{left:6vmin;color:white;font-weight:bold;}#shadows{left:2vmin;}#shadows:not(:checked)~.cubes{--shadow-filter:none;}.cubes{width:10vmin;height:10vmin;-webkit-transform:rotateX(60deg)rotateZ(-45deg);transform:rotateX(60deg)rotateZ(-45deg);-webkit-backface-visibility:visible;backface-visibility:visible;overflow:visible;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:9000px;perspective:9000px;}.cube,.large-shadow{height:10vmin;width:10vmin;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-transform-origin:centercenter-.5vmin;transform-origin:centercenter-.5vmin;position:absolute;top:0;left:0;}.cube>.cube-wrap,.large-shadow>.cube-wrap{-webkit-animation:cube4sinfiniteboth;animation:cube4sinfiniteboth;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-transform-origin:centercenter-.5vmin;transform-origin:centercenter-.5vmin;will-change:transform;}@-webkit-keyframes{from,to,20%,60%{-webkit-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-transform:none;transform:none;}40%{-webkit-transform:rotateY(-1turn);transform:rotateY(-1turn);}}@keyframes{from,to,20%,60%{-webkit-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-transform:none;transform:none;}40%{-webkit-transform:rotateY(-1turn);transform:rotateY(-1turn);}}.cube[data-cube^="1"],.large-shadow[data-cube^="1"]{top:calc(-10vmin-2px);--color-bg-top:#A0EBE8;--color-bg-bottom:#89E4E4;--color-fl-top:#4EAFBC;--color-fl-bottom:#43A5B2;}.cube[data-cube^="2"],.large-shadow[data-cube^="2"]{--color-bg-top:#89E4E4;--color-bg-bottom:#76DEE5;--color-fl-top:#43A5B2;--color-fl-bottom:#3D93A9;}.cube[data-cube^="3"],.large-shadow[data-cube^="3"]{top:calc(10vmin+2px);--color-bg-top:#76DEE5;--color-bg-bottom:#63D3D4;--color-fl-top:#3D93A9;--color-fl-bottom:#3B8D9F;}.cube[data-cube^="11"],.cube[data-cube^="21"],.cube[data-cube^="31"],.large-shadow[data-cube^="11"],.large-shadow[data-cube^="21"],.large-shadow[data-cube^="31"]{left:calc(-10vmin-2px);--color-fr-top:#2D505F;--color-fr-bottom:#2D4F63;}.cube[data-cube^="12"],.cube[data-cube^="22"],.cube[data-cube^="32"],.large-shadow[data-cube^="12"],.large-shadow[data-cube^="22"],.large-shadow[data-cube^="32"]{--color-fr-top:#2D4F63;--color-fr-bottom:#2A5262;}.cube[data-cube^="13"],.cube[data-cube^="23"],.cube[data-cube^="33"],.large-shadow[data-cube^="13"],.large-shadow[data-cube^="23"],.large-shadow[data-cube^="33"]{left:calc(10vmin+2px);--color-fr-top:#2A5262;--color-fr-bottom:#2A5467;}.cube[data-cube$="2"],.large-shadow[data-cube$="2"]{-webkit-transform:translateZ(calc(10vmin+2px));transform:translateZ(calc(10vmin+2px));}.cube[data-cube$="3"],.large-shadow[data-cube$="3"]{-webkit-transform:translateZ(calc(-10vmin-2px));transform:translateZ(calc(-10vmin-2px));}.large-shadows{-webkit-transform:translateZ(-21vmin);transform:translateZ(-21vmin);}.large-shadow{background:black;height:10vmin;width:10vmin;-webkit-transform-origin:topright;transform-origin:topright;-webkit-animation:large-shadow4sinfiniteboth;animation:large-shadow4sinfiniteboth;-webkit-filter:var(--shadow-filter,blur(3vmin));filter:var(--shadow-filter,blur(3vmin));opacity:0.2;will-change:transform;}@-webkit-keyframes{from,80%,to{-webkit-transform:scale(1.5,3);transform:scale(1.5,3);}20%{-webkit-transform:scale(1.5,2);transform:scale(1.5,2);}40%,60%{-webkit-transform:scale(1.5,5);transform:scale(1.5,5);}50%{-webkit-transform:scale(1,5);transform:scale(1,5);}}@keyframes{from,80%,to{-webkit-transform:scale(1.5,3);transform:scale(1.5,3);}20%{-webkit-transform:scale(1.5,2);transform:scale(1.5,2);}40%,60%{-webkit-transform:scale(1.5,5);transform:scale(1.5,5);}50%{-webkit-transform:scale(1,5);transform:scale(1,5);}}[class^="cube-"]{position:absolute;width:100%;height:100%;-webkit-backface-visibility:visible;backface-visibility:visible;top:0;left:0;}[class^="cube-"],[class^="cube-"]:before{will-change:transform;-webkit-animation:any4sinfiniteboth;animation:any4sinfiniteboth;}[class^="cube-"]:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:inherit;}.cube-top{-webkit-animation-name:cube-top;animation-name:cube-top;overflow:hidden;}.cube-top:before,.cube-top:after{will-change:transform;}.cube-top:before{background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#CBFEFF),to(transparent)),-webkit-gradient(linear,lefttop,leftbottom,from(var(--color-bg-top)),to(var(--color-bg-bottom)));background-image:linear-gradient(tobottom,#CBFEFF,transparent),linear-gradient(tobottom,var(--color-bg-top),var(--color-bg-bottom));background-size:2px100%,auto;background-repeat:no-repeat;}.cube-top:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#DFF4F0;-webkit-animation:cube-top-flash4sinfiniteboth;animation:cube-top-flash4sinfiniteboth;}@-webkit-keyframes{from,50%,60%,to{opacity:0;}52%{opacity:0.9;}}@keyframes{from,50%,60%,to{opacity:0;}52%{opacity:0.9;}}@-webkit-keyframes{20%{-webkit-transform:translateZ(calc(-10vmin+2vmin));transform:translateZ(calc(-10vmin+2vmin));}40%,60%,80%{-webkit-transform:none;transform:none;}}@keyframes{20%{-webkit-transform:translateZ(calc(-10vmin+2vmin));transform:translateZ(calc(-10vmin+2vmin));}40%,60%,80%{-webkit-transform:none;transform:none;}}.cube-front-left{-webkit-transform-origin:leftcenter;transform-origin:leftcenter;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);overflow:hidden;}.cube-front-left:before{background-image:-webkit-gradient(linear,lefttop,leftbottom,from(var(--color-fl-top)),to(var(--color-fl-bottom))),-webkit-gradient(linear,lefttop,leftbottom,from(rgba(255,255,255,0.5)),color-stop(60%,transparent));background-image:linear-gradient(tobottom,var(--color-fl-top),var(--color-fl-bottom)),linear-gradient(tobottom,rgba(255,255,255,0.5),transparent60%);background-size:autoauto1px100%;background-repeat:no-repeat;-webkit-transform-origin:right;transform-origin:right;-webkit-animation-name:cube-front-left;animation-name:cube-front-left;will-change:transform;}@-webkit-keyframes{20%{-webkit-transform:scaleX(0.2);transform:scaleX(0.2);}40%,60%{-webkit-transform:translateX(-8vmin)scaleX(0.2);transform:translateX(-8vmin)scaleX(0.2);}80%{-webkit-transform:none;transform:none;}}@keyframes{20%{-webkit-transform:scaleX(0.2);transform:scaleX(0.2);}40%,60%{-webkit-transform:translateX(-8vmin)scaleX(0.2);transform:translateX(-8vmin)scaleX(0.2);}80%{-webkit-transform:none;transform:none;}}.cube-front-right{-webkit-transform-origin:bottomcenter;transform-origin:bottomcenter;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);}.cube-front-right:before{background-image:-webkit-gradient(linear,lefttop,righttop,from(var(--color-fr-top)),to(var(--color-fr-bottom)));background-image:linear-gradient(toright,var(--color-fr-top),var(--color-fr-bottom));-webkit-transform-origin:top;transform-origin:top;-webkit-animation-name:cube-front-right;animation-name:cube-front-right;will-change:transform;}@-webkit-keyframes{20%{-webkit-transform:scaleY(0.2);transform:scaleY(0.2);}40%,60%{-webkit-transform:translateY(8vmin)scaleY(0.2);transform:translateY(8vmin)scaleY(0.2);}80%{-webkit-transform:none;transform:none;}}@keyframes{20%{-webkit-transform:scaleY(0.2);transform:scaleY(0.2);}40%,60%{-webkit-transform:translateY(8vmin)scaleY(0.2);transform:translateY(8vmin)scaleY(0.2);}80%{-webkit-transform:none;transform:none;}}.cube-bottom{-webkit-transform:translateZ(-10vmin);transform:translateZ(-10vmin);background-image:-webkit-gradient(linear,lefttop,leftbottom,from(var(--color-bg-top)),to(var(--color-bg-bottom)));background-image:linear-gradient(tobottom,var(--color-bg-top),var(--color-bg-bottom));-webkit-animation-name:cube-bottom;animation-name:cube-bottom;}@-webkit-keyframes{from,20%,80%,to{-webkit-transform:translateZ(calc(-10vmin+1px))scale(0.95);transform:translateZ(calc(-10vmin+1px))scale(0.95);}40%,60%{-webkit-transform:translateZ(-2vmin)scale(0.95);transform:translateZ(-2vmin)scale(0.95);}}@keyframes{from,20%,80%,to{-webkit-transform:translateZ(calc(-10vmin+1px))scale(0.95);transform:translateZ(calc(-10vmin+1px))scale(0.95);}40%,60%{-webkit-transform:translateZ(-2vmin)scale(0.95);transform:translateZ(-2vmin)scale(0.95);}}.cube-bottom:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#DFF4F0;-webkit-animation:cube-bottom-flash4sinfiniteboth;animation:cube-bottom-flash4sinfiniteboth;will-change:transform;}@-webkit-keyframes{from,40%,50%,to{opacity:0;}45%{opacity:0.9;}}@keyframes{from,40%,50%,to{opacity:0;}45%{opacity:0.9;}}[class^="shadow"]{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;-webkit-filter:var(--shadow-filter,blur(20px));filter:var(--shadow-filter,blur(20px));}[class^="shadow"],[class^="shadow"]:before{will-change:transform;}[class^="shadow"]:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#214354;opacity:0.7;}.shadow-y{-webkit-animation:shadow-y4sinfiniteboth;animation:shadow-y4sinfiniteboth;}.shadow-y[data-cube^="11"],.shadow-y[data-cube^="21"]{left:10%;}.shadow-y[data-cube^="13"],.shadow-y[data-cube^="23"]{left:-10%;}@-webkit-keyframes{to,40%,60%,80%,from{-webkit-transform:translateY(-100%)scale(2,0.75);transform:translateY(-100%)scale(2,0.75);}20%{-webkit-transform:scale(2,1);transform:scale(2,1);}}@keyframes{to,40%,60%,80%,from{-webkit-transform:translateY(-100%)scale(2,0.75);transform:translateY(-100%)scale(2,0.75);}20%{-webkit-transform:scale(2,1);transform:scale(2,1);}}.shadow-y:before{-webkit-animation:shadow-y-inverse4sinfiniteboth;animation:shadow-y-inverse4sinfiniteboth;-webkit-transform-origin:topcenter;transform-origin:topcenter;}@-webkit-keyframes{to,40%,60%,80%,from{opacity:0.9;-webkit-transform:scale(2,1);transform:scale(2,1);}20%{opacity:0;-webkit-transform:translateY(-100%)scale(2,0.75);transform:translateY(-100%)scale(2,0.75);}}@keyframes{to,40%,60%,80%,from{opacity:0.9;-webkit-transform:scale(2,1);transform:scale(2,1);}20%{opacity:0;-webkit-transform:translateY(-100%)scale(2,0.75);transform:translateY(-100%)scale(2,0.75);}}.shadow-flip{width:2vmin;height:50%;top:-1vmin;left:calc(50%-1vmin);-webkit-transform-origin:topcenter;transform-origin:topcenter;-webkit-filter:var(--shadow-filter,blur(1vmin));filter:var(--shadow-filter,blur(1vmin));-webkit-animation:shadow-flip4sinfiniteboth;animation:shadow-flip4sinfiniteboth;overflow:visible;}@-webkit-keyframes{from,20%,40%,50%,to{-webkit-transform:rotate(90deg);transform:rotate(90deg);}45%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}}@keyframes{from,20%,40%,50%,to{-webkit-transform:rotate(90deg);transform:rotate(90deg);}45%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}}.shadow-flip:before{-webkit-animation:shadow-flip-inverse4sinfiniteboth;animation:shadow-flip-inverse4sinfiniteboth;-webkit-transform-origin:topcenter;transform-origin:topcenter;opacity:0;}@-webkit-keyframes{from,20%,40%,50%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:0;}45%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0.6;}}@keyframes{from,20%,40%,50%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:0;}45%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0.6;}}.shadow-z{-webkit-animation:shadow-z4sinfiniteboth;animation:shadow-z4sinfiniteboth;overflow:visible;will-change:transform;-webkit-transform-origin:topcenter;transform-origin:topcenter;}.shadow-z[data-cube^="11"]{--shadow-z-left:50%;--shadow-z-top:50%;}.shadow-z[data-cube^="21"],.shadow-z[data-cube^="31"]{--shadow-z-left:50%;--shadow-z-top:0;}.shadow-z[data-cube^="32"]{--shadow-z-left:0;--shadow-z-top:0;--shadow-x-scale:2;}.shadow-z[data-cube^="33"]{--shadow-z-left:-50%;--shadow-z-top:0;}@-webkit-keyframes{from,40%,60%,80%,to{-webkit-transform:scale(var(--shadow-x-scale),2);transform:scale(var(--shadow-x-scale),2);}20%{-webkit-transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(calc(var(--shadow-x-scale,1)/2),2);transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(calc(var(--shadow-x-scale,1)/2),2);}}@keyframes{from,40%,60%,80%,to{-webkit-transform:scale(var(--shadow-x-scale),2);transform:scale(var(--shadow-x-scale),2);}20%{-webkit-transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(calc(var(--shadow-x-scale,1)/2),2);transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(calc(var(--shadow-x-scale,1)/2),2);}}.shadow-z:before{-webkit-animation:shadow-z-inverse4sinfiniteboth;animation:shadow-z-inverse4sinfiniteboth;}@-webkit-keyframes{40%,60%{-webkit-transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(var(--shadow-x-scale,1),2);transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(var(--shadow-x-scale,1),2);}45%{opacity:0;}from,40%,55%{opacity:.5;}to{opacity:1;}from,20%,80%,to{-webkit-transform:scale(2);transform:scale(2);}}@keyframes{40%,60%{-webkit-transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(var(--shadow-x-scale,1),2);transform:translateX(var(--shadow-z-left))translateY(var(--shadow-z-top))scale(var(--shadow-x-scale,1),2);}45%{opacity:0;}from,40%,55%{opacity:.5;}to{opacity:1;}from,20%,80%,to{-webkit-transform:scale(2);transform:scale(2);}}.cube[data-cube="111"]>.cube-wrap,.cube[data-cube="111"]>.cube-wrap:before,.cube[data-cube="111"]>.cube-wrap:after,.cube[data-cube="111"]>.cube-wrap>[class^="cube-"],.cube[data-cube="111"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="111"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:129ms;animation-delay:129ms;}.cube[data-cube="111"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:129ms;animation-delay:129ms;}[class^="shadow-"][data-cube="111"]:before,.large-shadow[data-cube="111"]{-webkit-animation-delay:129ms;animation-delay:129ms;}.cube[data-cube="112"]>.cube-wrap,.cube[data-cube="112"]>.cube-wrap:before,.cube[data-cube="112"]>.cube-wrap:after,.cube[data-cube="112"]>.cube-wrap>[class^="cube-"],.cube[data-cube="112"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="112"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:280ms;animation-delay:280ms;}.cube[data-cube="112"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:280ms;animation-delay:280ms;}[class^="shadow-"][data-cube="112"]:before,.large-shadow[data-cube="112"]{-webkit-animation-delay:280ms;animation-delay:280ms;}.cube[data-cube="113"]>.cube-wrap,.cube[data-cube="113"]>.cube-wrap:before,.cube[data-cube="113"]>.cube-wrap:after,.cube[data-cube="113"]>.cube-wrap>[class^="cube-"],.cube[data-cube="113"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="113"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:75ms;animation-delay:75ms;}.cube[data-cube="113"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:75ms;animation-delay:75ms;}[class^="shadow-"][data-cube="113"]:before,.large-shadow[data-cube="113"]{-webkit-animation-delay:75ms;animation-delay:75ms;}.cube[data-cube="121"]>.cube-wrap,.cube[data-cube="121"]>.cube-wrap:before,.cube[data-cube="121"]>.cube-wrap:after,.cube[data-cube="121"]>.cube-wrap>[class^="cube-"],.cube[data-cube="121"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="121"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:255ms;animation-delay:255ms;}.cube[data-cube="121"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:255ms;animation-delay:255ms;}[class^="shadow-"][data-cube="121"]:before,.large-shadow[data-cube="121"]{-webkit-animation-delay:255ms;animation-delay:255ms;}.cube[data-cube="122"]>.cube-wrap,.cube[data-cube="122"]>.cube-wrap:before,.cube[data-cube="122"]>.cube-wrap:after,.cube[data-cube="122"]>.cube-wrap>[class^="cube-"],.cube[data-cube="122"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="122"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:178ms;animation-delay:178ms;}.cube[data-cube="122"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:178ms;animation-delay:178ms;}[class^="shadow-"][data-cube="122"]:before,.large-shadow[data-cube="122"]{-webkit-animation-delay:178ms;animation-delay:178ms;}.cube[data-cube="123"]>.cube-wrap,.cube[data-cube="123"]>.cube-wrap:before,.cube[data-cube="123"]>.cube-wrap:after,.cube[data-cube="123"]>.cube-wrap>[class^="cube-"],.cube[data-cube="123"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="123"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:45ms;animation-delay:45ms;}.cube[data-cube="123"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:45ms;animation-delay:45ms;}[class^="shadow-"][data-cube="123"]:before,.large-shadow[data-cube="123"]{-webkit-animation-delay:45ms;animation-delay:45ms;}.cube[data-cube="131"]>.cube-wrap,.cube[data-cube="131"]>.cube-wrap:before,.cube[data-cube="131"]>.cube-wrap:after,.cube[data-cube="131"]>.cube-wrap>[class^="cube-"],.cube[data-cube="131"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="131"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:183ms;animation-delay:183ms;}.cube[data-cube="131"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:183ms;animation-delay:183ms;}[class^="shadow-"][data-cube="131"]:before,.large-shadow[data-cube="131"]{-webkit-animation-delay:183ms;animation-delay:183ms;}.cube[data-cube="132"]>.cube-wrap,.cube[data-cube="132"]>.cube-wrap:before,.cube[data-cube="132"]>.cube-wrap:after,.cube[data-cube="132"]>.cube-wrap>[class^="cube-"],.cube[data-cube="132"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="132"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:53ms;animation-delay:53ms;}.cube[data-cube="132"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:53ms;animation-delay:53ms;}[class^="shadow-"][data-cube="132"]:before,.large-shadow[data-cube="132"]{-webkit-animation-delay:53ms;animation-delay:53ms;}.cube[data-cube="133"]>.cube-wrap,.cube[data-cube="133"]>.cube-wrap:before,.cube[data-cube="133"]>.cube-wrap:after,.cube[data-cube="133"]>.cube-wrap>[class^="cube-"],.cube[data-cube="133"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="133"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:111ms;animation-delay:111ms;}.cube[data-cube="133"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:111ms;animation-delay:111ms;}[class^="shadow-"][data-cube="133"]:before,.large-shadow[data-cube="133"]{-webkit-animation-delay:111ms;animation-delay:111ms;}.cube[data-cube="211"]>.cube-wrap,.cube[data-cube="211"]>.cube-wrap:before,.cube[data-cube="211"]>.cube-wrap:after,.cube[data-cube="211"]>.cube-wrap>[class^="cube-"],.cube[data-cube="211"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="211"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:151ms;animation-delay:151ms;}.cube[data-cube="211"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:151ms;animation-delay:151ms;}[class^="shadow-"][data-cube="211"]:before,.large-shadow[data-cube="211"]{-webkit-animation-delay:151ms;animation-delay:151ms;}.cube[data-cube="212"]>.cube-wrap,.cube[data-cube="212"]>.cube-wrap:before,.cube[data-cube="212"]>.cube-wrap:after,.cube[data-cube="212"]>.cube-wrap>[class^="cube-"],.cube[data-cube="212"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="212"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:122ms;animation-delay:122ms;}.cube[data-cube="212"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:122ms;animation-delay:122ms;}[class^="shadow-"][data-cube="212"]:before,.large-shadow[data-cube="212"]{-webkit-animation-delay:122ms;animation-delay:122ms;}.cube[data-cube="213"]>.cube-wrap,.cube[data-cube="213"]>.cube-wrap:before,.cube[data-cube="213"]>.cube-wrap:after,.cube[data-cube="213"]>.cube-wrap>[class^="cube-"],.cube[data-cube="213"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="213"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:56ms;animation-delay:56ms;}.cube[data-cube="213"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:56ms;animation-delay:56ms;}[class^="shadow-"][data-cube="213"]:before,.large-shadow[data-cube="213"]{-webkit-animation-delay:56ms;animation-delay:56ms;}.cube[data-cube="221"]>.cube-wrap,.cube[data-cube="221"]>.cube-wrap:before,.cube[data-cube="221"]>.cube-wrap:after,.cube[data-cube="221"]>.cube-wrap>[class^="cube-"],.cube[data-cube="221"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="221"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:274ms;animation-delay:274ms;}.cube[data-cube="221"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:274ms;animation-delay:274ms;}[class^="shadow-"][data-cube="221"]:before,.large-shadow[data-cube="221"]{-webkit-animation-delay:274ms;animation-delay:274ms;}.cube[data-cube="222"]>.cube-wrap,.cube[data-cube="222"]>.cube-wrap:before,.cube[data-cube="222"]>.cube-wrap:after,.cube[data-cube="222"]>.cube-wrap>[class^="cube-"],.cube[data-cube="222"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="222"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:146ms;animation-delay:146ms;}.cube[data-cube="222"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:146ms;animation-delay:146ms;}[class^="shadow-"][data-cube="222"]:before,.large-shadow[data-cube="222"]{-webkit-animation-delay:146ms;animation-delay:146ms;}.cube[data-cube="223"]>.cube-wrap,.cube[data-cube="223"]>.cube-wrap:before,.cube[data-cube="223"]>.cube-wrap:after,.cube[data-cube="223"]>.cube-wrap>[class^="cube-"],.cube[data-cube="223"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="223"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:47ms;animation-delay:47ms;}.cube[data-cube="223"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:47ms;animation-delay:47ms;}[class^="shadow-"][data-cube="223"]:before,.large-shadow[data-cube="223"]{-webkit-animation-delay:47ms;animation-delay:47ms;}.cube[data-cube="231"]>.cube-wrap,.cube[data-cube="231"]>.cube-wrap:before,.cube[data-cube="231"]>.cube-wrap:after,.cube[data-cube="231"]>.cube-wrap>[class^="cube-"],.cube[data-cube="231"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="231"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:29ms;animation-delay:29ms;}.cube[data-cube="231"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:29ms;animation-delay:29ms;}[class^="shadow-"][data-cube="231"]:before,.large-shadow[data-cube="231"]{-webkit-animation-delay:29ms;animation-delay:29ms;}.cube[data-cube="232"]>.cube-wrap,.cube[data-cube="232"]>.cube-wrap:before,.cube[data-cube="232"]>.cube-wrap:after,.cube[data-cube="232"]>.cube-wrap>[class^="cube-"],.cube[data-cube="232"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="232"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:81ms;animation-delay:81ms;}.cube[data-cube="232"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:81ms;animation-delay:81ms;}[class^="shadow-"][data-cube="232"]:before,.large-shadow[data-cube="232"]{-webkit-animation-delay:81ms;animation-delay:81ms;}.cube[data-cube="233"]>.cube-wrap,.cube[data-cube="233"]>.cube-wrap:before,.cube[data-cube="233"]>.cube-wrap:after,.cube[data-cube="233"]>.cube-wrap>[class^="cube-"],.cube[data-cube="233"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="233"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:238ms;animation-delay:238ms;}.cube[data-cube="233"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:238ms;animation-delay:238ms;}[class^="shadow-"][data-cube="233"]:before,.large-shadow[data-cube="233"]{-webkit-animation-delay:238ms;animation-delay:238ms;}.cube[data-cube="311"]>.cube-wrap,.cube[data-cube="311"]>.cube-wrap:before,.cube[data-cube="311"]>.cube-wrap:after,.cube[data-cube="311"]>.cube-wrap>[class^="cube-"],.cube[data-cube="311"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="311"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:103ms;animation-delay:103ms;}.cube[data-cube="311"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:103ms;animation-delay:103ms;}[class^="shadow-"][data-cube="311"]:before,.large-shadow[data-cube="311"]{-webkit-animation-delay:103ms;animation-delay:103ms;}.cube[data-cube="312"]>.cube-wrap,.cube[data-cube="312"]>.cube-wrap:before,.cube[data-cube="312"]>.cube-wrap:after,.cube[data-cube="312"]>.cube-wrap>[class^="cube-"],.cube[data-cube="312"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="312"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:195ms;animation-delay:195ms;}.cube[data-cube="312"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:195ms;animation-delay:195ms;}[class^="shadow-"][data-cube="312"]:before,.large-shadow[data-cube="312"]{-webkit-animation-delay:195ms;animation-delay:195ms;}.cube[data-cube="313"]>.cube-wrap,.cube[data-cube="313"]>.cube-wrap:before,.cube[data-cube="313"]>.cube-wrap:after,.cube[data-cube="313"]>.cube-wrap>[class^="cube-"],.cube[data-cube="313"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="313"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:81ms;animation-delay:81ms;}.cube[data-cube="313"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:81ms;animation-delay:81ms;}[class^="shadow-"][data-cube="313"]:before,.large-shadow[data-cube="313"]{-webkit-animation-delay:81ms;animation-delay:81ms;}.cube[data-cube="321"]>.cube-wrap,.cube[data-cube="321"]>.cube-wrap:before,.cube[data-cube="321"]>.cube-wrap:after,.cube[data-cube="321"]>.cube-wrap>[class^="cube-"],.cube[data-cube="321"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="321"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:294ms;animation-delay:294ms;}.cube[data-cube="321"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:294ms;animation-delay:294ms;}[class^="shadow-"][data-cube="321"]:before,.large-shadow[data-cube="321"]{-webkit-animation-delay:294ms;animation-delay:294ms;}.cube[data-cube="322"]>.cube-wrap,.cube[data-cube="322"]>.cube-wrap:before,.cube[data-cube="322"]>.cube-wrap:after,.cube[data-cube="322"]>.cube-wrap>[class^="cube-"],.cube[data-cube="322"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="322"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:147ms;animation-delay:147ms;}.cube[data-cube="322"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:147ms;animation-delay:147ms;}[class^="shadow-"][data-cube="322"]:before,.large-shadow[data-cube="322"]{-webkit-animation-delay:147ms;animation-delay:147ms;}.cube[data-cube="323"]>.cube-wrap,.cube[data-cube="323"]>.cube-wrap:before,.cube[data-cube="323"]>.cube-wrap:after,.cube[data-cube="323"]>.cube-wrap>[class^="cube-"],.cube[data-cube="323"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="323"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:218ms;animation-delay:218ms;}.cube[data-cube="323"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:218ms;animation-delay:218ms;}[class^="shadow-"][data-cube="323"]:before,.large-shadow[data-cube="323"]{-webkit-animation-delay:218ms;animation-delay:218ms;}.cube[data-cube="331"]>.cube-wrap,.cube[data-cube="331"]>.cube-wrap:before,.cube[data-cube="331"]>.cube-wrap:after,.cube[data-cube="331"]>.cube-wrap>[class^="cube-"],.cube[data-cube="331"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="331"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:240ms;animation-delay:240ms;}.cube[data-cube="331"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:240ms;animation-delay:240ms;}[class^="shadow-"][data-cube="331"]:before,.large-shadow[data-cube="331"]{-webkit-animation-delay:240ms;animation-delay:240ms;}.cube[data-cube="332"]>.cube-wrap,.cube[data-cube="332"]>.cube-wrap:before,.cube[data-cube="332"]>.cube-wrap:after,.cube[data-cube="332"]>.cube-wrap>[class^="cube-"],.cube[data-cube="332"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="332"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:251ms;animation-delay:251ms;}.cube[data-cube="332"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:251ms;animation-delay:251ms;}[class^="shadow-"][data-cube="332"]:before,.large-shadow[data-cube="332"]{-webkit-animation-delay:251ms;animation-delay:251ms;}.cube[data-cube="333"]>.cube-wrap,.cube[data-cube="333"]>.cube-wrap:before,.cube[data-cube="333"]>.cube-wrap:after,.cube[data-cube="333"]>.cube-wrap>[class^="cube-"],.cube[data-cube="333"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="333"]>.cube-wrap>[class^="cube-"]:after{-webkit-animation-delay:73ms;animation-delay:73ms;}.cube[data-cube="333"]>.cube-wrap[class^="shadow-"]{-webkit-animation-delay:73ms;animation-delay:73ms;}[class^="shadow-"][data-cube="333"]:before,.large-shadow[data-cube="333"]{-webkit-animation-delay:73ms;animation-delay:73ms;}</style></head><body><inputtype="checkbox"id="shadows"checked/><labelfor="shadows">Softshadows</label><divclass="cubes"><divclass="cube"data-cube="111"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-z"data-cube="112"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="121"><divclass="cube-wrap"><divclass="cube-top"></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="131"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-z"data-cube="132"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="211"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="111"></div><divclass="shadow-y"data-cube="111"></div><divclass="shadow-z"data-cube="212"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="221"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="121"></div><divclass="shadow-y"data-cube="121"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="231"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="131"></div><divclass="shadow-y"data-cube="131"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="311"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="211"></div><divclass="shadow-y"data-cube="211"></div><divclass="shadow-z"data-cube="312"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="213"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="113"></div><divclass="shadow-y"data-cube="113"></div><divclass="shadow-z"data-cube="211"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="223"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-y"data-cube="123"></div><divclass="shadow-z"data-cube="221"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="233"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-y"data-cube="133"></div><divclass="shadow-z"data-cube="231"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="313"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="213"></div><divclass="shadow-y"data-cube="213"></div><divclass="shadow-z"data-cube="311"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="323"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="223"></div><divclass="shadow-y"data-cube="223"></div><divclass="shadow-z"data-cube="321"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="cube"data-cube="333"><divclass="cube-wrap"><divclass="cube-top"><divclass="shadow-flip"data-cube="233"></div><divclass="shadow-y"data-cube="233"></div><divclass="shadow-z"data-cube="331"></div></div><divclass="cube-bottom"></div><divclass="cube-front-left"></div><divclass="cube-front-right"></div><divclass="cube-back-left"></div><divclass="cube-back-right"></div></div></div><divclass="large-shadows"><divclass="large-shadow"data-cube="113"></div><divclass="large-shadow"data-cube="123"></div><divclass="large-shadow"data-cube="133"></div><divclass="large-shadow"data-cube="213"></div><divclass="large-shadow"data-cube="223"></div><divclass="large-shadow"data-cube="233"></div><divclass="large-shadow"data-cube="313"></div><divclass="large-shadow"data-cube="323"></div><divclass="large-shadow"data-cube="333"></div></div></div></body><script></script></html>关于“怎么用HTML+CSS+JS制作3D炫酷魔方”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用HTML+CSS+JS制作3D炫酷魔方”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。
上一篇：go语言属不属于底层语言
winlogins.exe是什么文件？winlogins.exe是不是病毒
winsock2.6.exe是什么文件？winsock2.6.exe是不是病毒
WinDefendor.dll是什么文件？WinDefendor.dll是不是病毒
系统目录是什么文件？系统目录是不是病毒
wholove.exe是什么文件？wholove.exe是不是病毒
winn.ini是什么文件？winn.ini是不是病毒
w6oou.dll是什么文件？w6oou.dll是不是病毒
winduxzawb.exe是什么文件？winduxzawb.exe是不是病毒
wuammgr32.exe是什么文件？wuammgr32.exe是不是病毒
windiws.exe是什么文件？windiws.exe是不是病毒