css做旋转相册效果

2022-04-01 20:02:46 阅读：237 来源： 互联网

标签：相册 rotateY transform 300px li ul background 旋转 css

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>

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118486620

标签：相册,rotateY,transform,300px,li,ul,background,旋转,css
来源： https://www.cnblogs.com/wangchuanxinshi/p/16088722.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css做旋转相册效果