纯css实现立体正方体盒子照片切换幻灯片效果代码-html代码-BFW代码库

纯css实现立体正方体盒子照片切换幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：纯css实现立体正方体盒子照片切换幻灯片效果代码，无js代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style>
        html, body {
        width: 100%;
        height: 100%;
        background: #FF0074;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 11px;
        }
    
    .title {
      text-align: center;
      margin: 40px;
    }
    
        .title h1, .title p {
          margin: 0;
        }
    
    .slider {
        width: 200px;
        height: 200px;
        margin: auto;
        -webkit-perspective: 600px;
                perspective: 600px;
    }
    
        .slider * {
                -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
                        transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
        }
    
        .container {
                width: inherit;
                height: inherit;
                -webkit-transform-style: preserve-3d;
                        transform-style: preserve-3d;
                -webkit-transform: rotateY(0deg) rotateX(0deg);
                        transform: rotateY(0deg) rotateX(0deg);
        }
    
                .slide, .slide:after, .slide:before {
                        display: block;
                        width: inherit;
                        height: inherit;
                        background: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f5f72362.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90');
                        position: absolute;
                        -webkit-transform-style: preserve-3d;
                                transform-style: preserve-3d;
                        background-size: cover;
                        background-position: center;
                }
    
                .slide.x {
                  -webkit-transform: rotateY(90deg);
                          transform: rotateY(90deg);
                } 
    
                        .slide.x:after {
                                content: '';
                                background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90');
                                -webkit-transform: translateZ(100px) rotateZ(-90deg);
                                        transform: translateZ(100px) rotateZ(-90deg);
                        }
    
                        .slide.x:before {
                                content: '';
                                background-image: url('//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90');
                                -webkit-transform: translateZ(-100px) rotateZ(-90deg);
                                        transform: translateZ(-100px) rotateZ(-90deg);
                        }
    
                .slide.y {
                  -webkit-transform: rotateX(90deg);
                          transform: rotateX(90deg);
                } 
    
                        .slide.y:after {
                                content: '';
                                background-image: url('//repo.bfw.wiki/bfwrepo/image/5e44fe28d3cc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90�.........完整代码请登录后点击上方下载按钮下载查看