鼠标滚动旋转三维盒子
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; min-height: 500vh; background-color: rgb(139, 201, 228); animation: body 1s linear; } @keyframes body { to { background-color: rgb(19, 48, 97); } } .progress { height: 3px; width: 0%; background-color: #fff; position: fixed; top: 0; left: 0; animation: progress 1s linear; } @keyframes progress { to { background-color: rgb(20, 255, 226); width: 100%; } } .cube-wrap { --size: 30vmin; position: fixed; top: 50%; left: 50%; width: 0; height: 0; perspective: 100vmin; } .cube { transform-style: preserve-3d; transform: rotateX(0deg) rotateZ(45deg) rotateY(-45deg); animation: cube 1s linear; } @keyframes cube { to { transform: rotateX(360deg) rotateZ(45deg) rotateY(-45deg); } } .side { position: absolute; width: var(--size); height: var(--size); background-color: #eee; backface-visibility: visible; top: calc(var(--size) * -.5); left: calc(var(--size) * -.5); } .top { background-color: #fff; transform: rotateX(90deg) translateZ(calc(var(--size) * .5)); } .bottom { background-color: #999; transform: rotateX(90deg) translateZ(calc(var(--size) * -.5)); } .left { background-color: #ccc; transform: rotateY(90deg) translateZ(calc(var(--size) * .5)); } .right { background-color: #ddd; transform: rotateY(90deg) translateZ(calc(var(--size) * -.5)); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0