css+jquery实现三维空间图片幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+jquery实现三维空间图片幻灯片切换效果代码
代码标签: css jquery 三维 空间 图片 幻灯片 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"); * { --ang: 0; } html, body { height: 100%; } body { background: black; display: flex; justify-content: center; align-items: center; flex-direction: column; } .spinner { transform-style: preserve-3d; position: relative; display: flex; align-items: center; justify-content: center; transform: rotateY(calc(var(--ang) * 1deg)) translateY(-12px); transition: all 0.5s ease-in-out; } .holder { width: 600px; height: 200px; display: flex; justify-content: center; align-items: center; perspective: 700px; perspective-origin: center; } .panel { border-radius: 5px; width: 100px; height: 100px; position: absolute; background-size: cover; background-position: 50% 50%; } .panel:nth-child(1) { transform: rotateY(0deg) translateZ(400px); } .panel:nth-child(2) { transform: rotateY(22.5deg) translateZ(400px); } .panel:nth-child(3) { transform: rotateY(45deg) translateZ(400px); } .panel:nth-child(4) { transform: rotateY(67.5deg) translateZ(400px); } .panel:nth-child(5) { transform: rotateY(90deg) translateZ(400px); } .panel:nth-child(6) { transform: rotateY(112.5deg) translateZ(400px); } .panel:nth-child(7) { transform: rotateY(135deg) translateZ(400px); } .panel:nth-child(8) { transform: rotateY(157.5deg) translateZ(400px); } .panel:nth-child(9) { transform: rotateY(180deg) translateZ(400px); } .panel:nth-child(10) { transform: rotateY(202.5deg) translateZ(400px); } .panel:nth-child(11) { transform: rotateY(225deg) translateZ(400px); } .panel:nth-child(12) { transform: rotateY(247.5deg) translateZ(400px); } .panel:nth-child(13) { transform: rotateY(270deg) translateZ(400px); } .panel:nth-child(14) { transform: rotateY(292.5deg) translateZ(400px); } .panel:nth-child(15) { transform: rotateY(315deg) translateZ(400px); } .panel:nth-child(16) { transform: rotateY(337.5deg) translateZ(400px); } .pagination { width: 600px; height: 44px; margin-top: 10px; text-align: center; } .pagination button { padding: 0; border: none; cursor: pointer; width: 44px; color: black; background: #fffa; height: 44px; margin: 0 10px; font-family: "Roboto", sans-serif; font-size: 20px; border-radius: 100%; transition: all 0.2s ease-in-out; } .pagination button:hover { background: #fffc; } .pagination button:active { background: #ffff; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .fade { background: #0006; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%); width: 860px; height: 200px; position: absol.........完整代码请登录后点击上方下载按钮下载查看
网友评论0