简易版3D旋转相册

最新推荐文章于 2024-06-19 12:56:51 发布

hello沃的

最新推荐文章于 2024-06-19 12:56:51 发布

阅读量944

点赞数 4

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/qq_45466449/article/details/103929597

版权

这篇博客介绍了如何制作简易版的3D旋转相册，主要使用了前端的基础知识，包括HTML和CSS。作者分享了项目的介绍、程序代码和运行结果，并提供了在火狐浏览器上的展示，但指出在IE浏览器上3D效果不支持。源代码和更多详情可在提供的百度云链接中获取。

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

简易版3D旋转相册的制作

第一次发博客，对于格式和规范不是很熟悉，大家多多包涵，有不足之处也希望大家能够指出。

1.项目介绍

这个3D旋转相册是最近在实习期间做的一个小东西，结构也非常的简单，只用到了前端很基础的一些知识。

2.程序代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
   
		margin: 0;
	    padding: 0;  
	}
	/*一整屏页面*/
	html,body{
   
		height: 100%;
		overflow: hidden;

	}
	/*给整个浏览器/body添加背景图片*/
	body{
   
		/*perspective: 500px;   这个属性可以用于调整视角，有兴趣的可以取消注释，改变里面数值试一下*/
		background: url(../img/13.jpg) no-repeat;/*插入背景图并且不让他平铺*/
		background-size: 100% 100%;/*设置背景图的大小*/
	}

	img{
    
		width: 250px;
		height: 350px;
		/*让这12张图片在同一个位置*/
		/*定位---将图片用按钉放在一个位置上*/
		position: absolute;
		left: 0;
		top: 0;
	}
	div{
   
		width: 250px;
		height