制作一个3D旋转相册

最新推荐文章于 2023-01-10 08:27:56 发布
最新推荐文章于 2023-01-10 08:27:56 发布
阅读量545 收藏 4
点赞数
文章标签： 3d html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58822985/article/details/117745180
版权

利用HTML常用标签，CSS常用属性，JS入门语法

制作一个3D旋转相册
part one
完成《个人相册》项目登录页面

在这里插入图片描述
代码如下，如有需要请自行整合

 #but1{
background-color:  coral;
border-bottom: black 1px solid;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
       } 
       #but2{
background-color: coral;
border-bottom: black 1px solid;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
       } 
      
.circle {
	border-radius: 50%;
  
	width: 400px;
	height: 400px;
    transform: translate(500px,100px);
	text-align: center;
    background-color:rgba(252,230,201,0.7);

  
}

#num1{
     border-bottom: black 1px solid;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
                background-color: transparent;
}
#num2{
     border-bottom: black 1px solid;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
                background-color: transparent;
}


<body background="素材/综合.jpg" wight="100%">
    <div >
        　　
        <div class="circle"><br/><br/><br/><br/>
           <strong>立即登陆</strong><br/>
            <table>
                <tr>
                    <input type="text" id="nm" placeholder="电子邮箱：" />
                    
                </tr><br/><br/>
                <tr>
                    <input type="password" id="p1" placeholder="密码,长度至少六位" />
                </tr><br/><br/>
                <tr>
                    <a href="#">忘记密码？</a>
                </tr><br/><br/>
                <tr>
                    <input type="button" id="but1" value="登陆"   onclick="fenn()" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="button"  id="but2" value="注册"   onclick="fann()"/>
                </tr>
            </table>
        </div>
  
        
    </div>

</body>

  function  fann(){
        
        window.location.href="注册.html";
           window.event.returnValue = false;
        
    }

    function fenn(){
     
            if(localStorage.getItem("username")==document.getElementById("nm").value){
                if(localStorage.getItem("password")==document.getElementById("p1").value){
                        alert("登录成功");
                        window.location.href="项目相册页面.html";
                       window.event.returnValue = false;
                     }
    
        }
 
    }

part two
注册页面：在这里插入图片描述

<style>
        #but3{
background-color:  coral;
border-bottom: black 1px solid;
                border-top-style: none;
                border-right-style: none;
                border-left-style: none;
       } 

 
        .rectangle {
	
	width: 400px;
	height: 400px;
    transform: translate(500px,100px);
	text-align: center;
    background-color:rgba(252,230,201,0.7);

}
    </style>

<body background="素材/综合.jpg">
    <div>
<div class="rectangle">
    <form action="">
       
        <tr>立即注册</tr><br/>
        <tr>邮箱<br/>
            <input type="text" id="em" name="username" onchange="f1()"   placeholder="电子邮箱：" /></tr><br/>
        <tr>用户名<br/>
            <input type="text" id="nm" name="password"   onchange="f2()"   placeholder="用户名长度不能超过5位：" /></tr><br/>
      
            <tr> 性别<br><input type="radio" name="性别" />男
        <input type="radio" name="性别" />女</tr><br/>
        
        <tr>头像<br/>  
            <input type="file" name="photo" id="ph"  /></tr><br/>
       
            <tr>密码<br/>
            <input type="password"  id="p1"   onchange="f3()" placeholder="密码长度至少六位，且由数字和字母组成："/></tr><br/>
        <tr>
           
            <tr>确认密码<br/><input type="password"     onchange="f4()"  id="p2" placeholder="两次密码必须一致："/></tr><br/>
        </tr>                                                             
       <br/>
        <tr><input type="button" id="but3" value="登陆" onclick="f5()" />   </tr>
         
    </form>
</div>
</div>
<div>

</div>
</body>

<script>
     function f1(){
        var em=document.getElementById("em").value
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(!reg.test(em)){
			alert("邮箱格式不正确");
		}

      }

      function f2(){

        var nm=document.getElementById("nm").value;
        if(nm.length>=6){
            alert("格式错误");
        }
      }

      function f3(){
          var p1=document.getElementById("p1").value;
          var reg =/^(?![^a-zA-Z]+$)(?!\D+$)/;
		  if(!reg.test(p1)||p1.length<=6){
			alert("格式不正确");
		}}

        function f4(){
          var p2=document.getElementById("p11").value;
		  if(p2!=document.getElementById("p1").value){
			alert("密码不一致");
		}}


        function f5(){
           localStorage.setItem("username",document.getElementById("em").value);
           localStorage.setItem("password",document.getElementById("p1").value);
           window.location.href="登陆.html";
           window.event.returnValue = false;
        
		}

        function f6(){
          
           window.location.href="登陆.html";
           return false;
        
		}

</script>

part three
个人相册页面：
在这里插入图片描述

<style>
     .container {
    display: flex;
    flex-direction: column;
}
    </style>
</head>
<body>
    <style type="text/css">
    a{
        color: honeydew;
    }

        html, body {
            padding: 0; margin: 0px;
        }

        .container {
            display: flex;
            height: 660px; width: 1349px;
            box-shadow: 0 0 0 1px white;
            background-image: url("素材/综合.jpg");
        }
    
        div:nth-child(1) {
            /* 属于其父元素的第一个子元素 */
            background-color:grey;
            height:5%;
            width: 100%;
            text-align: right;
           
         
        }
        div:nth-child(2) {
         
            width: 100%;
            height:95%;
            width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(5deg) rotateY(0deg);
            animation: go 30s linear infinite;/* linear表示匀速、infinite表示让动画无限次播放 */

        }
        #box img{width: 400px;
                 height: 280px;
                 position: absolute;
                 left: 0;
                 top: 0;
        }

     

        #box img:nth-child(1){
            transform: rotateY(60deg) translateZ(400px);}
        #box img:nth-child(2){
            transform: rotateY(120deg) translateZ(400px);}
        #box img:nth-child(3){
            transform: rotateY(180deg) translateZ(400px);}
        #box img:nth-child(4){
            transform: rotateY(240deg) translateZ(400px);}
        #box img:nth-child(5){
            transform: rotateY(300deg) translateZ(400px);}
        #box img:nth-child(6){
            transform: rotateY(360deg) translateZ(400px);}
    
		@keyframes go {
		    0%{transform: rotateX(0deg) rotateY(0deg);}
		    25%{transform: rotateX(5deg) rotateY(90deg);}
		    50%{transform: rotateX(0deg) rotateY(180deg);}
		    75%{transform: rotateX(-5deg) rotateY(270deg);}
		    100%{transform: rotateX(0deg) rotateY(355deg);}
		
		}

    </style>
    <body>
        <section class="container">
          
            <div >
               <a href="#"  >个人信息</a>
               <a href="#" >退出</a>
            </div>
            <div  id="box">
                <img src="素材/1.jpg">
                <img src="素材/2.jpg">
                <img src="素材/3.jpg">
                <img src="素材/4.jpg">
                <img src="素材/5.jpg">
                <img src="素材/6.jpg">
               
            </div>
           
        </section>
    
            
      
</body>

花费一番大力气，干货满满，请大家批评指正

小小#
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3D旋转相册（附源码+素材）
weixin_45345143的博客
12-03 1万+
3D立体选择相册制作，给你的女神最棒的效果，实现的过程都是用的win10电脑自带的软件实现的，可操作性强，无需额外安装软件。
web前端html+css实现立体旋转相册(表白可用)
xt2106119337的博客
11-11 3117
web前端旋转相册
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6048
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
3D旋转相册
04-28
3D旋转相册
3D立体旋转相册.zip
08-30
抖音上那些炫酷的网页特效。这是一个3D的旋转相册代码，使用纯CSS编写
JavaScript制作3D旋转相册
10-16
主要为大家详细介绍了JavaScript制作3D旋转相册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
3D旋转相册.zip
05-14
3D旋转相册 相册(Photo album)具有宝贵的珍藏意义，根据时间的发展以及收藏形式的变化，主要分为传统相册和现代相册。传统相册又称影集或照片集，是用来装放相片的物品，主要用来收藏和保护相片使用，通常由纸壳和...
html+css制作3d旋转动态相册
03-05
适合小白使用，0基础，直接使用；直接往里面添加照片，资源包含使用指南，按照步骤直接完成，简单直接。
3d旋转相册.rar
04-25
很火的表白代码，用于对心爱的人表白，电子相册，当鼠标触碰时，旋转的正方体逐渐分开变大，在内部还会有一个小型的正方体
3d相册制作代码
09-14
3d相册制作代码，欢迎大家来下载，保你满意开心，希望你能下载
3D立体图片旋转特效源码.zip
07-10
3D立体图片旋转特效源码，本程序是一个3D效果的一个图片旋转的应用，点击图片就可以旋转图片大家可以多多的学习下，希望能够给大家带来一些帮助，喜欢的朋友可以看看吧。   效果图:
相册三维立体旋转
05-23
如何制作三维立体旋转的相册，让你能拥有奇妙的相册。
CSS3通过3D变换立体旋转相册
kun的博客
11-23 3万+
图片镇楼：      声明：本来想做一个多面体相册的，但是在网上没有找到例子，最终完整代码是在一个英文程序网站上copy的，但是没有解释，我把大体实现流程解释了一遍，旋转真的是绕蒙我了····代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二十面体&lt;/title&gt; &lt;style type="t...
用html+CSS制作一个3D旋转相册
谦谦君的博客
10-22 2万+
前端html+css知识小应用 首先，我们要新建一个总的文件夹，文件夹里面新建一个images的文件夹，用来装图片，一个HTML文件，这里要注意，images文件夹和html文件是并列属性的，编辑器我用的webstrom，如下图所示： 然后，在images里面保存10张图片加1张背景图片（背景图片可以不设置），图片名字按顺序用1.jpg到10.jpg，背景图片这里用的star.jpg。如下图所示...
3d立方体旋转相册
热门推荐
BeautifulApple的博客
04-29 5万+
抖音上要到的效果 2019年11月19日 做了教程更新，没弄出来的直接看下面的更新 文件目录 按照这个目录创建就可以，照片放到 img 文件夹里，照片名字按下面方式命名，照片后缀是 .jpg 照片命名 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" />...
3d正方体旋转相册代码_1分钟制作你自己的3D旋转相册(文末有共享链接)
weixin_39860755的博客
11-27 3969
不知在凛冽的寒风里的你是否还好？ 今天我们来做一个可以稍微抚慰你冻伤的小心灵的事情，一个3D旋转相册： 第一步，你需要找12张照片并命名为1.jpg,2.jpg,...,12.jpg等，并新建一个文件夹，命名为img 第二步，新建一个txt文件，并修改扩展名为index.html，以记事本打开文档，并输入一下代码：(其中：表示的是img为图片的文件夹名称...
3D旋转相册代码及详细使用教程
m0_54861649的博客
02-24 792
相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法！ 效果展示 代码展示 1.html 3D立体动态相册
html制作3d旋转相册
最新发布
05-31
以下是一个简单的HTML代码示例，可以用来创建一个基本的3D旋转相册： ```html <!DOCTYPE html> <title>3D旋转相册 /* 设置相册容器 */ #album { perspective: 1000px; transform-style: preserve-3d; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值