HTML5情人节礼物2（女友3D相册）

最新推荐文章于 2025-03-11 12:23:40 发布

Himit_ZH

最新推荐文章于 2025-03-11 12:23:40 发布

阅读量5.5k

点赞数 19

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_43853097/article/details/104254073

版权

本文分享了一个使用HTML5和CSS实现的3D翻转相册，作为情人节礼物。相册包含内外两层共12张照片，鼠标交互可翻转查看。提供源代码和免费云盘下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

简简单单最表心意，一个翻转的3D方块相册，有外6张照片，内6张照片。

HTML代码+CSS代码

首先是HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>3D相册</title>
    <base target="_blank" />
    <link rel="stylesheet" href="./sourses/3D相册.css" />  
</head>
<body>
    <div class="hovertreeinfo">
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR>
    <p>因为有你，世界变得美丽；<br>因为有你，生活有了意义；<br>因为有你，一切都是甜蜜。<br>女某某，情人节快乐！</p>
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR>
    <h2 style="color: red">Tips:鼠标触碰下方方块有惊喜！</h2><br><br>
	</div>
    <div>
        <h1 class="text">情人节快乐</h1>
    </div>
    <div class="wrap">
        <div class="cube">
            <div class="out_front">
                <img src="./sourses/pictures/女1.jpg" class="pic" />  <!-- 外前 -->
            </div>
            <div class="out_back">
                <img src="./sou