js+css实现三维3d魔方旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：js+css实现三维3d魔方旋转动画效果代码

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

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
    	background: lightgrey;
    	overflow: hidden;
    }
    
    .scene {
    	margin: 230px auto;
    	width: 100px;
    	perspective: 1000px;
    	perspective-origin: 50% 50%;
    }
    @media (max-width: 500px) {.scene {transform: scale(.7);}}
    @media (max-width: 400px) {.scene {transform: scale(.6);}}
    
    .cube {
    	position: relative;
    	transform-style: preserve-3d;
    	transform-origin: 50px 50px;
    	transform: rotateY(-30deg) rotateX(-20deg) rotateZ(9deg);
    }
    .cube-layer {
    	transform-style: preserve-3d;
    	transform-origin: 50px 50px;
    }
    .cube-layer.turn {
    	transition: transform .8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }
    
    .cubie {
    	transform-style: preserve-3d;
    	transform-origin: 50px 50px;
    }
    
    .cubie-corner-position-0 { transform: translate3d(100px, -100px, 100px); }
    .cubie-corner-position-1 { transform: translate3d(-100px, -100px, 100px) rotateY(-90deg); }
    .cubie-corner-position-2 { transform: translate3d(100px, -100px, -100px) rotateY(90deg); }
    .cubie-corner-position-3 { transform: translate3d(-100px, -100px, -100px) rotateY(180deg); }
    .cubie-corner-position-4 { transform: translate3d(100px, 100px, 100px) rotateX(180deg) rotateY(90deg); }
    .cubie-corner-position-5 { transform: translate3d(-100px, 100px, 100px) rotateX(180deg) rotateY(180deg); }
    .cubie-corner-position-6 { transform: translate3d(100px, 100px, -100px) rotateX(180deg); }
    .cubie-corner-position-7 { transform: translate3d(-100px, 100px, -100px) rotateX(180deg) rotateY(-90deg); }
    
    .cubie-corner-orientation-0 {}
    .cubie-corner-orientation-1 { transform: rotateY(-90deg) rotateX(90deg); }
    .cubie-corner-orientation-2 { transform: rotateY(90deg) rotateZ(-90deg); }
    
    .cubie-edge-position-0  { transform: translate3d(0px, -100px, 100px); }
    .cubie-edge-position-1  { transform: translate3d(-100px, -100px, 0px) rotateY(-90deg); }
    .cubie-edge-position-2  { transform: translate3d(100px, -100px, 0px) rotateY(90deg); }
    .cubie-edge-position-3  { transform: translate3d(0px, -100px, -100px) rotateY(180deg); }
    .cubie-edge-position-4  { transform: translate3d(0px, 100px, 100px) rotateX(180deg) rotateY(180deg); }
    .cubie-edge-position-5  { transform: translate3d(-100px, 100px, 0px) rotateX(180deg) rotateY(-90deg); }
    .cubie-edge-position-6  { transform: translate3d(100px, 100px, 0px) rotateX(180deg) rotateY(90deg); }
    .cubie-edge-position-7  { transform: translate3d(0px, 100px, -100px) rotateX(180deg); }
    .cubie-edge-position-8  { transform: translate3d(100px, 0px, 100px) rotateX(-90deg) rotateY(90deg); }
    .cubie-edge-position-9  { transform: translate3d(-100px, 0px, 100px) rotateX(-90deg) rotateY(-90deg); }
    .cubie-edge-position-10 { transform: translate3d(100px, 0px, -100px) rotateX(90deg) rotateY(90deg); }
    .cubie-edge-position-11 { transform: translate3d(-100px, 0px, -100px) rotateX(90deg) rotateY(-90deg); }
    
    .cubie-edge-orientation-0 {}
    .cubie-edge-orientation-1 { transform: rotateX(-90deg) rotateY(180deg); }
    
    .cubie-middle-r  { transform: translate3d(100px, 0px, 0px); }
    .cubie-middle-l  { transform: translate3d(-100px, 0px, 0px); }
    .cubie-middle-f  { transform: translate3d(0px, 0px, 100px); }
    .cubie-middle-b  { transform: translate3d(0px, 0px, -100px); }
    .cubie-middle-u  { transform: translate3d(0px, -100px, 0px); }
    .cubie-middle-d  { transform: translate3d(0px, 100px, 0px); }
    
    .cubie-face {
    	position: absolute;
    	width: 100px;
    	height: 100px;
    	background-color: rgba(0,30,60,0.2);
    	/*border-radius: 16px;*/
    	transform-style: preserve-3d;
    }
    .face-u { transform: rotateX(90deg)  translateZ(50px); }
    .face-f { transform:                 translateZ(50px); }
    .face-r { transform: rotateY(90deg)  translateZ(50px); }
    .face-l { transform: rotateY(-90deg) translateZ(50px); }
    .face-b { transform: rotateY(180deg) translateZ(50px); }
    .face-d { transform: rotateX(-90deg) translateZ(50px); }
    
    .cubie-sticker {
    	background-image: url(//repo.bfw.wiki/bfwrepo/svg/stickers.svg);
    	background-size: 600px 100px;
    }
    .sticker-u { background-position-x: 0; }
    .sticker-f { background-position-x: -100px; }
    .sticker-r { background-position-x: -200px; }
    .sticker-l { background-position-x: -300px; }
    .sticker-b { background-position-x: -400px; }
    .sticker-d { background-position-x: -500px; }
    
    .turn-u1, .turn-d3 { transform: rotateY(-90deg); }
    .turn-f1, .turn-b3 { transform: rotateZ(90deg); }
    .turn-r1, .turn-l3 { transform: rotateX(90deg); }
    .turn-l1, .turn-r3 { transform: rotateX(-90deg); }
    .turn-b1, .turn-f3 { transform: rotateZ(-90deg); }
    .turn-d1, .turn-u3 { transform: rotateY(90deg); }
    .turn-u2 { transform: rotateY(-180deg); }
    .turn-f2 { transform: rotateZ(180deg); }
    .turn-r2 { transform: rotateX(180deg); }
    .turn-l2 { transform: rotateX(-180deg); }
    .turn-b2 { transform: rotateZ(-180deg); }
    .turn-d2 { transform: rotateY(180deg); }
    @keyframes rotate {
      from { transform: rotateX(-30deg) rotateY(0deg); }
      to { transfor.........完整代码请登录后点击上方下载按钮下载查看