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-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 { transform: rotateX(330deg) rotateY(1800deg); }
}
.cube {
-webkit-animation: rotate 120s infinite linear;
animation: rotate 120s infinite linear;
}
</style>
<script>
if(navigator.userAgent.toLowerCase().indexOf('chrome') == -1) {
window.addEventListener('load', function() {
var el = document.createElement('span');
el.innerHTML = 'Your browser may not be able to support this demo. Please use Google Chrome.';
el.style.background = 'red';
el.style.color = 'white';
el.style.fontSize = '20px';
el.style.padding = '2px';
el.style.maxWidth = '65%';
el.style.display = 'inline-block';
document.body.insertBefore(el, document.body.firstChild);
}, false);
}
</script>
</head>
<body>
<div class="scene">
<div class="cube">
<!-- corners -->
<div class="cube-layer">
<div class="cubie cubie-corner-position-0">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-f"></div>
<div class="cubie-face face-r cubie-sticker sticker-r"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-1">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-l"></div>
<div class="cubie-face face-r cubie-sticker sticker-f"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-2">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-r"></div>
<div class="cubie-face face-r cubie-sticker sticker-b"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-3">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-b"></div>
<div class="cubie-face face-r cubie-sticker sticker-l"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-4">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-d"></div>
<div class="cubie-face face-f cubie-sticker sticker-r"></div>
<div class="cubie-face face-r cubie-sticker sticker-f"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-5">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-d"></div>
<div class="cubie-face face-f cubie-sticker sticker-f"></div>
<div class="cubie-face face-r cubie-sticker sticker-l"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-6">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-d"></div>
<div class="cubie-face face-f cubie-sticker sticker-b"></div>
<div class="cubie-face face-r cubie-sticker sticker-r"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-corner-position-7">
<div class="cubie cubie-corner-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-d"></div>
<div class="cubie-face face-f cubie-sticker sticker-l"></div>
<div class="cubie-face face-r cubie-sticker sticker-b"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<!-- edges -->
<div class="cube-layer">
<div class="cubie cubie-edge-position-0">
<div class="cubie cubie-edge-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-f"></div>
<div class="cubie-face face-r"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-edge-position-1">
<div class="cubie cubie-edge-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-l"></div>
<div class="cubie-face face-r"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-edge-position-2">
<div class="cubie cubie-edge-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-r"></div>
<div class="cubie-face face-r"></div>
<div class="cubie-face face-l"></div>
<div class="cubie-face face-b"></div>
<div class="cubie-face face-d"></div>
</div>
</div>
</div>
<div class="cube-layer">
<div class="cubie cubie-edge-position-3">
<div class="cubie cubie-edge-orientation-0">
<div class="cubie-face face-u cubie-sticker sticker-u"></div>
<div class="cubie-face face-f cubie-sticker sticker-b"></div>
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0