3D立体方块旋转相册

默认 11个月前 散逸
浏览:187 0

前几天在抖音偶然看到了,觉得还挺好看的。

演示网站:http://ceshi.ylzz7.top/3d/


代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转方块画册</title>
    <style type="text/css">
    /*外层容器样式*/
    .wrap{
         margin: 220px;
        position: relative;
    }
    /*立方体效果*/
    .set{
         width: 50px;
            height: 50px;
            margin: 0 auto;
        transform-style: preserve-3d;
        /*设置动画播放样式:动画对象rotate 播放速度曲线从头到尾相同 时间20s 播放次数无限次*/
            animation: rotate linear 20s infinite;
    }
    /*动画的旋转方式,先设定总体的*/
    /*兼容*/
    /*firefox*/
    @-moz-keyframes rotate{
        from{
            transform: rotateX(0deg) rotateY(0deg);
        }to{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    /*sofari chrome*/
    @-webkit-keyframes rotate {                
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*opera*/
    @-o-keyframes rotate {                                
        from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
     /*设置单个图片的样式*/   
     .set div{
         position: absolute;
         width: 200px;
         height: 200px;
         opacity: 0.8;
         /*持续时间为4s*/
         transition: all .4s;
     }
     .pic {
            width: 200px;
            height: 200px;
        }
        .set .out_front {
            /*绕Y轴转动0度,向屏幕外偏移,离观察者近100px*/
            transform: rotateY(0deg) translateZ(100px);
        }
         .set .out_back {
             /*绕Y轴转动0度,向屏幕内移动,离观察者远离100px*/
            transform: rotateY(0deg) translateZ(-100px) ;
        }

        .set .out_left {
            /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕Y轴转动-90度,形成左面*/
            transform: rotateY(-90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕Y轴转动90度,形成右面*/
        .set .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕X轴转动90度,形成顶面*/
        .set .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕X轴转动-90度,形成底面*/
        .set .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /*定义小正方体样式*/
        .set span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .set .s_pic {
            width: 100px;
            height: 100px;
        }

        .set .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .set .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .set .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .set .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .set .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .set .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠标移入后样式*/
        /**/
        .set:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .set:hover .out_back {
            transform: translateZ(-200px) rotateY(0deg);
        }

        .set:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .set:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .set:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .set:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

    </style>
</head>
<body>
<!--创造一个独立的空间给我们的方块-->
    <div class="wrap">
    <!--建立一个div,设置共同的动画样式,统一协调-->
        <div class="set">
        <!--设置外层的方块的六个面-->
            <!--前-->
            <div class="out_front"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f246.jpg"></div>
            <!--后-->
            <div class="out_back"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f613.jpg"></div>
            <!--左-->
            <div class="out_left"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1ae5.jpg"></div>
            <!--右-->
            <div class="out_right"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c19c8.jpg"></div>
            <!--上-->
            <div class="out_top"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
            <!--下-->
            <div class="out_bottom"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
        <!--设置内层的方块的六个面,这里包裹img标签使用span是为了之后设置样式时便于区分-->
            <!--前-->
            <span class="in_front"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943c912e.jpg"></span>
            <!--后-->
            <span class="in_back"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e4a11.jpg"></span>
            <!--左-->
            <span class="in_left"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e5482.jpg"></span>
            <!--右-->
            <span class="in_right"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94411992.jpg"></span>
            <!--上-->
            <span class="in_top"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94412ee7.jpg"></span>
            <!--下-->
            <span class="in_bottom"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e9441387d.jpg"></span>

        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转方块画册</title>
    <style type="text/css">
    /*外层容器样式*/
    .wrap{
         margin: 220px;
        position: relative;
    }
    /*立方体效果*/
    .set{
         width: 50px;
            height: 50px;
            margin: 0 auto;
        transform-style: preserve-3d;
        /*设置动画播放样式:动画对象rotate 播放速度曲线从头到尾相同 时间20s 播放次数无限次*/
            animation: rotate linear 20s infinite;
    }
    /*动画的旋转方式,先设定总体的*/
    /*兼容*/
    /*firefox*/
    @-moz-keyframes rotate{
        from{
            transform: rotateX(0deg) rotateY(0deg);
        }to{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    /*sofari chrome*/
    @-webkit-keyframes rotate {                
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*opera*/
    @-o-keyframes rotate {                                
        from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
     /*设置单个图片的样式*/   
     .set div{
         position: absolute;
         width: 200px;
         height: 200px;
         opacity: 0.8;
         /*持续时间为4s*/
         transition: all .4s;
     }
     .pic {
            width: 200px;
            height: 200px;
        }
        .set .out_front {
            /*绕Y轴转动0度,向屏幕外偏移,离观察者近100px*/
            transform: rotateY(0deg) translateZ(100px);
        }
         .set .out_back {
             /*绕Y轴转动0度,向屏幕内移动,离观察者远离100px*/
            transform: rotateY(0deg) translateZ(-100px) ;
        }

        .set .out_left {
            /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕Y轴转动-90度,形成左面*/
            transform: rotateY(-90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕Y轴转动90度,形成右面*/
        .set .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕X轴转动90度,形成顶面*/
        .set .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
        /*向屏幕外移动,离观察者远离100px,与正前方图片重叠,再绕X轴转动-90度,形成底面*/
        .set .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /*定义小正方体样式*/
        .set span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .set .s_pic {
            width: 100px;
            height: 100px;
        }

        .set .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .set .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .set .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .set .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .set .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .set .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠标移入后样式*/
        /**/
        .set:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .set:hover .out_back {
            transform: translateZ(-200px) rotateY(0deg);
        }

        .set:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .set:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .set:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .set:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }

    </style>
</head>
<body>
<!--创造一个独立的空间给我们的方块-->
    <div class="wrap">
    <!--建立一个div,设置共同的动画样式,统一协调-->
        <div class="set">
        <!--设置外层的方块的六个面-->
            <!--前-->
            <div class="out_front"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f246.jpg"></div>
            <!--后-->
            <div class="out_back"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b79f613.jpg"></div>
            <!--左-->
            <div class="out_left"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1ae5.jpg"></div>
            <!--右-->
            <div class="out_right"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c19c8.jpg"></div>
            <!--上-->
            <div class="out_top"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
            <!--下-->
            <div class="out_bottom"><img class="pic" src="https://i.loli.net/2019/04/17/5cb6e7b7c1b1f.jpg"></div>
        <!--设置内层的方块的六个面,这里包裹img标签使用span是为了之后设置样式时便于区分-->
            <!--前-->
            <span class="in_front"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943c912e.jpg"></span>
            <!--后-->
            <span class="in_back"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e4a11.jpg"></span>
            <!--左-->
            <span class="in_left"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e943e5482.jpg"></span>
            <!--右-->
            <span class="in_right"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94411992.jpg"></span>
            <!--上-->
            <span class="in_top"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e94412ee7.jpg"></span>
            <!--下-->
            <span class="in_bottom"><img class="s_pic" src="https://i.loli.net/2019/04/17/5cb6e9441387d.jpg"></span>

        </div>
    </div>
</body>
</html>

版权声明:散逸 发表于 2019-04-30 10:44:55。
转载请注明:3D立体方块旋转相册 | 散逸

暂无评论

暂无评论...