css实现三维立方体堆积形成的彭罗斯三角错觉效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维立方体堆积形成的彭罗斯三角错觉效果代码,鼠标放上去切换一个角度看看
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { transform-style: preserve-3d; } body { margin: 0; height: 100vh; background: radial-gradient(circle at 50% 25%, #36546c, #02111c); overflow: hidden; justify-content: center; align-items: center; display: flex; flex-wrap: wrap; align-content: center; --grad: linear-gradient(0deg, #0002, #fff0); } .content { width: 52vmin; height: 38vmin; margin: 0 auto; position: absolute; transition: all 1s ease 0s; transform: rotateX(-35.5deg) rotateY(45deg) rotateZ(0deg); animation: move 3s ease 0.5s; } .content:hover { transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); } @keyframes move { 50% {transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);} } .cube { --width: 10; --height: 10; --depth: 10; --hue: 200; --sat: 40%; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); position: absolute; right: 0; top: 0; } .side { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; box-sizing: border-box; border-radius: 2px; } .side:nth-of-type(1) { transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)); background: var(--grad), hsl(var(--hue), var(--sat), 40%); } .side:nth-of-type(2) { transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg); background: var(--grad), hsl(var(--hue), var(--sat), 35%); } .side:nth-of-type(3) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); background: var(--grad), hsl(var(--hue), var(--sat), 35%); } .side:nth-of-type(4) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); background: var(--grad), hsl(var(--hue), var(--sat), 60%); } .side:nth-of-type(5) { height: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin)); background: var(--grad), hsl(var(--hue), var(--sat), 80%); } .side:nth-of-type(6) { height: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin)); background: var(--grad), hsl(var(--hue), var(--sat), 25%); } /*** cube positions ***/ .cube:nth-child(1) { top: 14vmin } .cube:nth-child(3) { right: 14vmin; top: 0; } .cube:nth-child(4) { right: 28vmin; } .cube:nth-child(5) { right: 42vmin; } .cube:nth-child(6) { transform: translateZ(14vmin); right: 42vmin; } .cube:nth-child(7) { transform: translateZ(28vmin); right: 42vmin; } .cube:nth-child(8) { transform: translateZ(42vmin); right: 42vmin; } .cube:nth-child(9) { transform: translateZ(42vmin); right: 42vmin; top: -14vmin; } .cube:nth-child(10) { top: 28vmin; } .cube:nth-child(9) .side:nth-child(2), .cube:nth-child(9) .side:nth-child(3), .cube:nth-child(9) .side:nth-child(5), .cube:nth-child(9) .side:nth-child(6) { opacity: 0; } .side:nth-of-type(6):before { content: ""; background: #0006; position: absolute; width: 100%; height: 100%; transform: translateZ(30vmin) translateX(20vmin) translateY(10vmin); box-shadow: 0 0 5vmin 2vmin #0008; opacity: 0.25; transition: all 0.5s ease 0s; animation: shadow 3s ease 0.5s; } @keyframes shadow { 25%, 60% {opacity: 0;} 80% {opacity: 0.25;} } .cube:nth-child(9) .side:nth-of-type(6):before { opacity: 0; transition: all 0.5s ease 0s; } .content:hover .cube .side:nth-of-type(6):before { opacity: 0; transition: all 0.5s ease .........完整代码请登录后点击上方下载按钮下载查看
网友评论0