css+js实现三维棋牌视觉差异效果代码
代码语言:html
所属分类:视觉差异
代码描述:css+js实现三维棋牌视觉差异效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style-type: none; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; background: #242424; } .container { width: 600px; height: 600px; border-radius: 4px; display: flex; justify-content: center; align-items: center; perspective: 10000px; perspective-origin: center; animation: perspective 8s cubic-bezier(0.4, 0, 0.1, 1) infinite; } .container .cube { width: 50px; height: 100px; position: absolute; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 0deg); } .container .cube.odd .side.bottom { background-color: #fff; } .container .cube.even .side.bottom { background-color: #000; } .container .cube > .side { position: absolute; width: 100%; height: 100%; } .container .cube > .side.top { transform: rotateX(90deg) translateZ(25px); background-color: #363636; width: 50px; height: 50px; } .container .cube > .side.front { transform: translateZ(25px); height: 100px; background: #d7d7d7; background: linear-gradient(0deg, #d7d7d7 0%, #000 100%); } .container .cube > .side.back { transform: translateZ(-25px); height: 100px; background: #d7d7d7; background: linear-gradient(0deg, #d7d7d7 0%, #000 100%); } .container .cube > .side.left { transform: rotateY(90deg) translateZ(25px); height: 100px; width: 50px; background: #d7d7d7; background: linear-gradient(0deg, #d7d7d7 0%, #000 100%); } .container .cube > .side.right { transform: rotateY(-90deg) translateZ(25px); height: 100px; width: 50px; background: #d7d7d7; background: linear-gradient(0deg, #d7d7d7 0%, #000 100%); } .container .cube > .side.bottom { background-color: #c9fffe; transform: rotateX(-90deg) translateZ(75px); width: 50px; height: 50px; } .container .chessboard { width: 400px; height: 20px; position: relative; transform-style: preserve-3d; transform: rotate3d(20, 20, 20, 120deg); animation: rotate 8s cubic-bezier(0.4, 0, 0.1, 1) infinite; } .container .chessboard > .side { position: absolute; width: 100%; height: 100%; } .container .chessboard > .side.top { transform: rotateX(90deg) translateZ(200px); background-color: #363636; width: 400px; height: 400px; } .container .chessboard > .side.front { transform: translateZ(200px); height: 20px; background-color: #79553b; } .container .chessboard > .side.back { transform: translateZ(-200px); height: 20px; background-color: #79553b; } .container .chessboard > .side.left { transform: rotateY(90deg) translateZ(200px); height: 20px; width: 400px; background-color: #79553b; } .container .chessboard > .side.right { transform: rotateY(-90deg) translateZ(200px); height: 20px; width: 400px; background-color: #79553b; } .container .chessboard > .side.bottom { background-color: #363636; transform: rotateX(-90deg) translateZ(-180px); width: 400px; height: 400px; } @keyframes perspective { 0% { perspective: 10000px; } 25% { perspective: 200px; } 50% { perspective: 10000px; } 65% { perspective: 3000px; } 100% { perspective: 10000px; } } @keyframes rotate { 0% { transform: rotate3d(20, 20, 20, 120deg); } 30% { transform: rotate3d(20, 20, 20, 120deg); } 55% { transform: rotate3d(16, 10, 30, 150deg); } 65% { transform: rotate3d(600, 0, 30, 170deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0