js实心三维可交互相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:js实心三维可交互相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; perspective: 800px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(#3a4149, #111722); } main { position: relative; transform-style: preserve-3d; width: 50vmin; height: 75vmin; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } img { width: 100%; height: 100%; object-fit: cover; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } article { position: absolute; inset: 0; -webkit-box-reflect: below 50px linear-gradient(transparent, rgba(255, 255, 255, 0.15)); } article button { border: 0; outline: 0; cursor: pointer; width: 100%; height: 100%; overflow: hidden; border-radius: 5%; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } article button:focus-visible { box-shadow: 0 0 0 3px cyan; } article button:focus { box-shadow: 0 0 0 3px cyan; } article button:focus:not(:focus-visible) { box-shadow: none; } article button:hover, article button:hover img, article button:focus, article button:focus img { transform: scale(1.07); } </style> </head> <body > <main></main> <script> /** * Initially the elements are positioned in front of the camera. * We define here the transformations to position them in the scene. * When clicking on an item, we apply the inversed transformation but on the main container to "zoom" on the item */ const articles = new Map([ ["6392322", { tx: "-90%", tz: "-70vmin", ry: "60deg",img:"//repo.bfw.wiki/bfwrepo/image/615cf7a3d9d92.png" }], ["1761279", { tz: "-110vmin" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0