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

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

文章目录

    • 一、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);
    }
}

2.5 效果图

完整项目
本项目采用vscode实现。

链接:https://pan.baidu.com/s/1iv2SH6Iocg8CcqeMsT5j5g
提取码:9527

你可能感兴趣的:(html,html,css)