我是靠谱客的博主 缥缈丝袜,这篇文章主要介绍前端旋转相册的实现,现在分享给大家,希望可以做个参考。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

 

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html {

            height: 100%;

            width: 100%;

            overflow: hidden;

            margin: 0;

            padding: 0;

            background: url(q.jpg) no-repeat 0px 0px;

            background-repeat: no-repeat;

            background-size: 100% 100%;

            -moz-background-size: 100% 100%;

        }

        :root{

            height: 100%;

        }

        body{

            height: 100%;

            perspective: 2000px;

            transform-style: preserve-3d;

        }

        .userInfo{

            width: 100%;

            height: 30px;

            line-height: 30px;

            color: white;

            background: grey;

        }

        .mynav{

            float: right;

        }

        .myherf{

            text-decoration:none;

            line-height: 30px;

            color: white;

        }

 

        div.photo{

            width: 250px;

            height: 250px;

            position: absolute;

            left: 50%;

            top: 40%;

            transform: translate(-50%,-50%);

            transform-style: preserve-3d;

            animation: run 10s linear infinite;

        }

        @keyframes run{

            0%{

                transform: translate(-50%,-50%) rotateY(0deg);

            }

            100%{

                transform: translate(-50%,-50%) rotateY(360deg);

            }

        }

        img{

            width: 250px;

            position: absolute;

            opacity: 0.99;

            backface-visibility: visible;

            /* 默认值为visible,即能看见3d画面的背面,hidden看不见 */

        }

        img:nth-of-type(1){

            transform: rotateY(45deg) translatez(450px);

        }

        img:nth-of-type(2){

            transform: rotateY(90deg) translatez(450px);

        }

        img:nth-of-type(3){

            transform: rotateY(135deg) translatez(450px);

        }

        img:nth-of-type(4){

            transform: rotateY(180deg) translatez(450px);

        }

        img:nth-of-type(5){

            transform: rotateY(225deg) translatez(450px);

        }

        img:nth-of-type(6){

            transform: rotateY(270deg) translatez(450px);

        }

        img:nth-of-type(7){

            transform: rotateY(315deg) translatez(450px);

        }

        img:nth-of-type(8){

            transform: rotateY(360deg) translatez(450px);

        }

    </style>

</head>

<body>

    <div>

        <div class="userInfo">

        

            <nav class="mynav">

                <a href="#" class="myherf">个人信息</a>

                <a href="布局1.html" class="myherf">退出</a>

            </nav>

        </div>

        <div class="photo">

            <img src="1.jpg" alt="">

            <img src="2.jpg" alt="">

            <img src="3.jpg" alt="">

            <img src="4.jpg" alt="">

            <img src="5.jpg" alt="">

            <img src="6.jpg" alt="">

            <img src="7.jpg" alt="">

            <img src="8.jpg" alt="">

        </div>

    </div>

    <script>

        document.body.onmousemove = function(e){

            this.style.perspectiveOrigin = ""+e.pageX+"px "+e.pageY+"px";

        }//鼠标当前点为视角所在方位

        var name = localStorage.getItem("username1");

            

        alert("欢迎你,"+name);


 

     

        

    </script>

    

</body>

</html>

最后

以上就是缥缈丝袜最近收集整理的关于前端旋转相册的实现的全部内容,更多相关前端旋转相册内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(56)

评论列表共有 0 条评论

立即
投稿
返回
顶部