CSS3 制作动态相册

CSS3 制作动态相册

  3D万花筒

  思路
     1) 创建站点
      在站点里面再新建html文档
           再新建css文档
           再新建图片文件夹
     2) 在HTMl里面 创建一个嵌套的块级标签div分别命名不同的类和id，然后
         在子div标签里面继续嵌套6个figure标签里面包含6张图片(图片要格式一
         样 .jpg规格大小最 好也一样）

准备的6张图：

     3) 在css中 ，对相应的类名 id 进行宽高 旋转 动画 设置

如图所示：

    *{
   

                padding: 0;
                margin: 0;
                border: none;
                outline: none;
                box-sizing: border-box;
            }

            *:before,*:after{
   
               box-sizing: border-box;
            }

            html,body{
   
                min-height: 100%;
            }

            body{
   
                background-image: radial-gradient(rgb(110, 236, 173) 0%, lightgray 100%);;
            }

            .div01{
   
                margin: 400px auto;
                width: 210px;
                height: 140px;
                position: relative;
                perspective: 900px;
                position:relative;
                transform-style: preserve-3d;
                transform:rotateX(-12deg);
            }
            

            #photo1{
   
                width: 100%;
                height: 100%;
                position: absolute;
                transform-style:preserve-3d;
                animation: rotation 20s infinite linear;
            }

            #photo1:hover{
   
                animation-play-state: paused;
               

            }

            #photo1 figure{
   
                display: block;
                position: absolute;
                width: 220px;
                height: 120px;
                left: 10px;
                top: 10px;
                background: black;
                overflow: hidden;
                border: solid 3px black;
            }

            img{
   
                filter: grayscale(1);
                cursor: pointer;
                transition:all 0.3s ease 0s;
                width: 100%;
                height: 100%;
            }

            img:hover{
   
                filter: grayscale(0);
                transform: scale(1.2,1.2);
                
            }