博主:不许代码码上红
欢迎:点赞、收藏、关注、评论。
格言: 大鹏一日同风起,扶摇直上九万里。文章目录
- 一、HTML设计
- 二、格式设计
- 2.1 背景设计
- 2.2 容器控制
- 2.3 贴图
- 2.4 让图片动起来
- 2.5 效果图
用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>
设计要求
在滚动立体相册的后面是一个渐变色的背景。在垂直方向和水平方向都水平居中。
css代码实现
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#ccc,rgb(5,1,36));
}
设计要求
容器中所有的图片保持在相同的尺寸。
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立体展示。
设计要求
六张图分别放在正方体的六个面上。
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);
}
设计要求
让图片动起来,产生动态效果。
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);
}
}
完整项目
本项目采用vscode实现。
链接:https://pan.baidu.com/s/1iv2SH6Iocg8CcqeMsT5j5g
提取码:9527