CSS3 制作动态相册

最新推荐文章于 2024-06-25 09:46:33 发布

m0_53377583

最新推荐文章于 2024-06-25 09:46:33 发布

阅读量602

点赞数 1

文章标签： css3 html

本文链接：https://blog.csdn.net/m0_53377583/article/details/110912744

版权

本文介绍了如何利用CSS3技术制作3D万花筒和3D魔方效果的动态相册。首先，创建站点并组织HTML结构，包括嵌套的div标签和figure标签，用于展示图片。接着，在CSS中设置相应的宽高、旋转和动画效果，以实现3D视觉变换。当鼠标经过图片时，相册呈现出独特的交互效果。

摘要由CSDN通过智能技术生成

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)