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

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

代码语言：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-ori.........完整代码请登录后点击上方下载按钮下载查看