旋转相册的制作

恁..

已于 2024-07-03 16:16:51 修改

阅读量2.4k

点赞数 51

分类专栏：前端开发语言 html 文章标签： 3d 动画前端

于 2022-09-08 20:39:39 首次发布

本文链接：https://blog.csdn.net/weixin_65607135/article/details/126771346

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

10 篇文章 1 订阅

订阅专栏

开发语言

5 篇文章 0 订阅

订阅专栏

3D立体旋转相册？

废话不多说，整活

1.首先建一个文件夹

2.在这个文件夹中，再创建一个文件夹img，用来存放要使用的图片，同级目录下还需创建一个文档。注意的是需要将文档后缀名改为html，如图所示

3.将你需要的图片放在img文件夹里面

4.然后在index.html拖到vscode里面进行编辑，复制以下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 800px;
}
section {
width: 300px;
height: 200px;
margin: 400px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
background-image: url(./img/d8a11469cd936689a6248e8943c5ce22.jpg);
background-size: contain;
}
section:hover{
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;

}
div:nth-child(1) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform: translateZ(500px);
}
div:nth-child(2) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(60deg) translateZ(500px);
}
div:nth-child(3) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(120deg) translateZ(500px);
}
div:nth-child(4) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(180deg) translateZ(500px);
}
div:nth-child(5) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(240deg) translateZ(500px);
}
div:nth-child(6) {
background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
transform:rotateY(300deg) translateZ(500px);
}

</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>

在url里面放你需要的相册，只需要在./img/后面写你自己相册的名字就可以了。

5.写好之后直接保存退出，双击你的index.html文件就可以看到效果了哦。

效果图如下：

在浏览器里是会旋转的哦，大家快试试哦，送给你心爱的那个她（他）吧，去送一份惊喜吧。

html和css真的很炫酷，对于没有接触过的人来说是有点困难，但是如果感兴趣的，深入了解一下就会发现它的奇妙之处，会制作很多炫酷的效果哦。

恁..

关注

51
点赞
踩
50

收藏

觉得还不错? 一键收藏
41
评论
旋转相册的制作

html和css真的很炫酷，对于没有接触过的人来说是有点困难，但是如果感兴趣的，深入了解一下就会发现它的奇妙之处，会制作很多炫酷的效果哦。2.然后在文件夹里再建一个文件夹用来放图片，一个新建文档，注意把后缀名改成.html.在浏览器里是会旋转的哦，大家快试试哦，送给你心爱的那个她（他）吧，去送一份惊喜吧。在url里面放你需要的相册，只需要在./img/后面写你自己相册的名字就可以了。5.写好之后直接保存退出，双击你的index.html文件就可以看到效果了哦。3.将你需要的图片放在img文件夹里面。
复制链接

扫一扫