jquery实现三维图文卡片旋转切换动画效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery实现三维图文卡片旋转切换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Merriweather:300:italic" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> html, body { height: 100%; padding: 0; margin: 0; } body { background: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .js-transitions-disabled * { transition: none !important; } .carousel { position: relative; height: 100%; overflow: hidden; perspective: 50vw; perspective-origin: 50% 50%; } .carousel__control { position: absolute; height: 160px; width: 40px; background: #fff; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; } .carousel__control a { position: relative; display: block; width: 100%; padding-top: 75%; box-sizing: border-box; } .carousel__control a:hover:before { background-color: rgba(0,0,0,0.4); } .carousel__control a.active:before, .carousel__control a.active:hover:before { background-color: rgba(0,0,0,0.6); } .carousel__control a:first-child { margin-top: 15px; } .carousel__control a:before { position: absolute; top: 50%; left: 0; right: 0; margin: auto; border-radius: 50%; padding-top: 25%; width: 25%; background: rgba(0,0,0,0.2); content: ''; display: block; margin-top: -12.5%; } .carousel__stage { position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; margin: auto; transform-style: preserve-3d; transform: translateZ(calc(-50vh + 20px)); } .spinner { position: absolute; width: calc(50vw - (20px)); height: calc(100vh - 40px); top: 0; left: 0; right: auto; bottom: 0; margin: auto; transform-style: preserve-3d; transition: transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 50%; transform: rotateX(0); } .js-spin-fwd .spinner { transform: rotateX(-90deg); } .js-spin-bwd .spinner { transform: rotateX(90deg); } .js-spin-fwd .spinner--right { transform: rotateX(90deg); } .js-spin-bwd .spinner--right { transform: rotateX(-90deg); } .spinner--right { right: 0; left: auto; } .spinner.........完整代码请登录后点击上方下载按钮下载查看
网友评论0