css做旋转相册效果

最新推荐文章于 2024-06-18 12:33:46 发布

忍者1

最新推荐文章于 2024-06-18 12:33:46 发布

阅读量309

点赞数

分类专栏： javascript 文章标签： css javascript

原文链接：http://www.mark-to-win.com/tutorial/50666.html

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css做旋转相册效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: url(img/bg.jpg) no-repeat;
                background-attachment: fixed;
                background-size: cover;
            }
            img{
                width: 200px;
                height: 300px;
                transition: all 1.5s;
            }
            ul{
                width: 200px;
                height: 300px;
                margin: 250px auto;
                /*border: 1px solid;*/
                transform-style:preserve-3d;
                position: relative;
                animation: play 10s infinite linear;
               
            }
            @keyframes play{
                from{
                    transform: rotateX(-20deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(-20deg) rotateY(360deg);
                }
            }
            ul:hover{
                animation-play-state: paused;
            }
            ul:hover li img{
                opacity: .8;
            }
            ul li:hover  img{
                opacity: 1;
                transform: scale(1.5);
            }
            ul li{
                width: 200px;
                height: 300px;
                position: absolute;
                list-style: none;
            }
            ul li:nth-child(1){
                background-color: pink;
                transform: rotateY(60deg) translateZ(300px);
            }
            ul li:nth-child(2){
                background-color: pink;
                transform: rotateY(120deg) translateZ(300px);
            }
            ul li:nth-child(3){
                background-color: pink;
                transform: rotateY(180deg) translateZ(300px);
            }
            ul li:nth-child(4){
                background-color: pink;
                transform: rotateY(240deg) translateZ(300px);
            }
            ul li:nth-child(5){
                background-color: pink;
                transform: rotateY(300deg) translateZ(300px);
            }
            ul li:nth-child(6){
                background-color: pink;
                transform: rotateY(360deg) translateZ(300px);
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img src="img/m1.jpg"/></li>
            <li><img src="img/m2.jpg"/></li>
            <li><img src="img/m3.jpg"/></li>
            <li><img src="img/m5.jpg"/></li>
            <li><img src="img/m6.jpg"/></li>
            <li><img src="../../img/mm2.jpg"/></li>
        </ul>
       
    </body>
</html>