css实现三维立体旋转相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现三维立体旋转相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .gallery { --s: 150px; /* the image size */ display: grid; transform-style: preserve-3d; animation: r 15s linear infinite; position: relative; } @keyframes r { 0% {transform: perspective(450px) rotateX(-100deg) rotate(0deg)} to {transform: perspective(450px) rotateX(-100deg) rotate(-360deg)} } .gallery > img { grid-area: 1/1; width: var(--s); aspect-ratio: 1; object-fit: cover; border-radius: 10px 10px 0 0; transform: rotate(var(--_a)) translateY(120%) rotateX(90deg); } .gallery > img:nth-child(1) {--_a: 0deg} .gallery > img:nth-child(2) {--_a: 60deg} .gallery > img:nth-child(3) {--_a: 120deg} .gallery > img:nth-child(4) {--_a: 180deg} .gallery > img:nth-child(5) {--_a: 240deg} .gallery > img:nth-child(6) {--_a: 300deg} .gallery::before { content: ""; position: absolute; inset: -100%; clip-path: polygon(50% 0,calc(50% + .866*50%) 25%,calc(50% + .866*50%) 75%,50% 100%,calc(50% - .866*50%) 75%,calc(50% - .866*50%) 25%); background: #99B2B7; transform: translateZ(calc(var(--s)/2)) rotate(90deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0