我用浏览器做了一个3D旋转相册，学妹直呼好美

最新推荐文章于 2023-03-02 12:52:32 发布

风中传来的苦咸

最新推荐文章于 2023-03-02 12:52:32 发布

阅读量908

点赞数 46

分类专栏：入门文章标签：前端 css html

本文链接：https://blog.csdn.net/haisisdn/article/details/119348080

版权

本文展示了如何利用HTML和CSS3制作一个可在任意浏览器中运行的3D旋转相册。通过HBuilder工具，作者详细介绍了index.html的文档结构、CSS3样式和JavaScript的应用。相册支持至少6张、最多12张600*600尺寸的jpg格式图片，并提供了源码打包下载链接。

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

不说废话，先上效果

程序员女朋友的相册

平台，任意浏览器

文档结构

工具：HBuilder
在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css-3d旋转</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--/*外层最大容器*/-->
		<div class="wrap">
	<!--	/*包裹所有元素的容器*/-->
		<div class="cube">
			<!--前面图片 -->
			<div class="out_front">
				<img src="img/1.jpg"  class="pic"/>
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="img/2.jpg"  class="pic"/>
			</div>
			<!--左图片 -->
			<div class="out_left">
				<img src="img/3.jpg"  class="pic"