【HTML】立体旋转相册，专属于你的表白方式

最新推荐文章于 2024-04-28 15:06:30 发布

不许代码码上红

最新推荐文章于 2024-04-28 15:06:30 发布

阅读量707

点赞数

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

本文链接：https://blog.csdn.net/qq_45801904/article/details/128120508

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

博主：👍不许代码码上红
欢迎：🐋点赞、收藏、关注、评论。
格言：大鹏一日同风起，扶摇直上九万里。

文章目录

一、HTML设计
二、格式设计
2.1 背景设计
2.2 容器控制
2.3 贴图
2.4 让图片动起来
2.5 效果图

一、HTML设计

用HTML做一个容器，里面存放六张图片，用以构成一个正方体。
HTML主要代码

<body>
    <div class="container">
        <div class="item front"><img src="./1.jpg" width="100%" alt=""></div>
        <div class="item back"><img src="./1.jpg" width="100%" alt=""></div>
        <div class="item left"><img src="./1.jpg" width="100%" alt=""></div>
        <div class="item right"><img src="./1.jpg" width="100%" alt=""></div>
        <div class="item top"><img src="./1.jpg" width="100%" alt=""></div>
        <div class="item bottom"><img src="./1.jpg" width="100%" alt=""></div>

    </div>
    
</body>

二、格式设计

2.1 背景设计

设计要求
在滚动立体相册的后面是一个渐变色的背景。在垂直方向和水平方向都水平居中。

css代码实现

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(#ccc,rgb(5,1,36));
}

2.2 容器控制

设计要求
容器中所有的图片保持在相同的尺寸。

css代码实现

.container{

    width: 300px;
    height:300px;
    position:relative;

    transform-style: preserve-3d;
    /*transform: rotateX(-20deg) rotateY(-20deg);*/
    /*animation: rotate 3s linear forwards;*/
    animation: rotate 10s alternate infinite;

.container .item{
    position: absolute;
    height:100%;
    width:100%;
    opacity: 0.7;/*透明度*/
}
}

注意：transform-style: preserve-3d;让图片3d立体展示。

2.3 贴图

设计要求
六张图分别放在正方体的六个面上。

css代码实现

.container .front{
    transform: translateZ(150px);
}
.container .back{
    transform: rotateY(180deg) translateZ(150px);
}
.container .left{
    transform: rotateY(-90deg) translateZ(150px);
}
.container .right{
    transform: rotateY(90deg) translateZ(150px);
}
.container .top{
    transform: rotateX(90deg) translateZ(150px);
}
.container .bottom{
    transform: rotateX(-90deg) translateZ(150px);
}

2.4 让图片动起来

设计要求
让图片动起来，产生动态效果。

css代码实现

@keyframes rotate {
    0%,5%{
        transform: rotateY(90deg);
    }
    20%,25%{
        transform: rotateY(180deg);
    }
    40%,45%{
        transform: rotateY(270deg);
    }
    60%,65%{
        transform: rotateX(-90deg);
    }
    80%,85%{
        transform: rotateX(0deg);
    }
    95%,100%{
        transform: rotateX(90deg);
    }
}