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 { transfor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0