纯css实现三维立方体图文幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:纯css实现三维立方体图文幻灯片切换效果代码,可上下左右三维翻转。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; font-family: "Poppins", sans-serif; transform-style: preserve-3d; } body, html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 12pt; line-height: 18pt; font-weight: 400; color: white; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; background: #444; margin: 0; } .container-3D { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 300px; height: 300px; } .flopper { position: relative; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; transition: all 0.5s ease-in-out; /*animation: rotate 6s linear infinite;*/ } figure { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; width: 300px; height: 300px; transform-origin: 50% 50%; padding: 20px 25px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; border: 1px solid white; } figure div { width: 100%; height: 100px; background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .front div { background: url("//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } .left div { background: url("//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } .right div { background: url("//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } .back div { background: url("//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } .bottom div { background: url("//repo.bfw.wiki/bfwrepo/image/607d718558628.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } .top div { background: url("//repo.bfw.wiki/bfwrepo/image/60b585d92d2c6.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"); } figure h2 { font-size: 20pt; line-height: 20pt; margin: 20px 0px 10px 0px; } figure p { font-size: 12pt; line-height: 18pt; margin: 0 0 15px 0; text-align: center; } figure a { position: relative; width: 130px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; color: black; text-decoration: none; z-index: 1; overflow: hidden; transition: all 0.3s ease-in-out; } figure a::after { position: absolute; content: ""; bottom: 100%; left: 0; width: 100%; height: 100%; background: black; z-index: -1; transition: all 0.3s ease-in-out; } figure a:hover::after { bottom: 0; transition: all 0.3s ease-in-out; } figure a:hover { color: white; transition: all 0.3s ease-in-out; } .front { transform: translateZ(150px); background: #1be7ff; --face_color: #1be7ff; } .back { transform: rotateY(180deg) translateZ(150px); background: #6eeb83; --face_color: #6eeb83; } .top { transform: rotateX(90deg) translateZ(150px); background: #e4ff1a; --face_color: #e4ff1a; } .bottom { transform: rotateX(-90deg) translateZ(150px); background: #e8aa14; --face_color: #e8aa14; } .left { transform: rotateY(-90deg) translateZ(150px); background: #ff5714; --face_color: #ff5714; } .right { transform: rotateY(90deg) translateZ(150px); background: black; --face_color: black; } .front h2, .front p, .back h2, .back p, .top h2, .top p, .bottom h2, .bottom p { color: black; } .front a, .back a, .top a, .bottom a { background: black; color: white; } .front a::after, .back a::after, .top a::after, .bottom a::after { background: white; } .front a:hover, .back a:hover, .top a:hover, .bottom a:hover { color: black; } label { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--face_color); color: black; font-size: 14pt; margin: 0; padding: 0; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; backface-visibility: hidden; -webkit-backface-visibility: hidden; } label:hover { cursor: pointer; } label:nth-child(1) { left: -55px; padding-bottom: 5px; } label:nth-child(2) { right: -55px; padding-bottom: 5px; } label:nth-child(3) { top: -55px; } label:nth-child(4) { bottom: -55px; } .right label { color: white; } .left label { color: white; } #swap-left-front:checked ~ .flopper { transform: rotateY(90deg); transition: all 0.5s ease-in-out; } #swap-right-front:checked ~ .flopper { transform: rotateY(-90deg); transition: all 0.5s ease-in-out; } #swap-up-front:checked ~ .flopper { transform: rotateX(-90deg); transition: all 0.5s ease-in-out; } #swap-down-front:checked ~ .flopper { transform: rotateX(90deg); transition: all 0.5s ease-in-out; } #swap-left-back:checked ~ .flopper { transform: rotateY(-90deg); transition: all 0.5s ease-in-out; } #swap-right-back:checked ~ .flopper { transform: rotateY(-270deg); transition: all 0.5s ease-in-out; } #swap-up-back:checked ~ .flopper { transform: rotateX(-90deg); transition: all 0.5s ease-in-out; } #swap-down-back:checked ~ .flopper { transform: rotateX(90deg); transition: all 0.5s ease-in-out; } #swap-left-top:checked ~ .flopper { transform: rotateY(90deg); transition: all 0.5s ease-in-out; } #swap-right-top:checked ~ .flopper { transform: rotateY(-90deg); transition: all 0.5s ease-in-out; } #swap-up-top:checked ~ .flopper { transform: rotateY(-180deg); transition: all 0.5s ease-in-out; } #swap-down-top:checked ~ .flopper { transform: rotateX(0deg); transition: all 0.5s ease-in-out; } #swap-left-bottom:checked ~ .flopper { transform: rotateY(90deg); transition: all 0.5s ease-in-out; } #swap-right-bottom:checked ~ .flopper { transform: rotateY(-90deg); transition: all 0.5s ease-in-out; } #swap-up-bottom:checked ~ .flopper { transform: rotateX(0deg); transition: all 0.5s ease-in-out; } #swap-down-bottom:checked ~ .flopper { transform: rotateY(180deg); transition: all 0.5s ease-in-out; } #swap-left-left:checked ~ .flopper { transform: rotateY(180deg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0