用CSS+HTML代码制作的3D动态旋转相册

已于 2022-01-29 10:12:24 修改
阅读量1.6k 收藏 17
点赞数 2
文章标签： css html 3d
于 2022-01-27 09:39:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58003121/article/details/122700142
版权

CSS代码

html{
    background:black;
    height: 100%;
}

.wrap{
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform:rotateX(-30deg)rotateY(-80deg) ;
    -webkit-animation:rotate 20s infinite;
    animation-timing-function:linear ;    
}
@-webkit-keyframes rotate{
        from{transform: rotateX(0deg)rotateY(0deg);}
        to{transform: rotateX(360deg)rotateY(360deg);}
    }
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: all.4s;
}
.pic{
    width: 200px;
    height: 200px;
}
.cube.out_front{
    transform: rotateY(0deg) translateZ(100px);
}
.cube.out_back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube.out_left{
    transform: rotateY(90deg)translateZ(100px);
}
.cube.out_right{
    transform: rotateY(-90deg)translateZ(100px);
}
.cube.out_top{
    transform: rotateX(90deg)translateZ(100px);
}
.cube.out_bottom{
    transform: rotateX(-90deg)translateZ(100px);
}
.cube span{
    display: bloack;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}    
.cube.in_pic{
    width: 100px;
    height: 100px;
}
.cube.in_front{
    transform: rotateY(0deg) translateZ(50px);
}
.cube.in_back{
    transform:translateZ(-50px)  rotateY(180deg);
}
.cube.in_left{
    transform:rotateY(90deg) translateZ(50px);
}
.cube.in_right{
    transform:rotateY(-90deg) translateZ(50px);
}    
.cube.in_top{
    transform:rotateY(90deg) translateZ(50px);
}    
.cube.in_bottom{
    transform:rotateY(-90deg) translateZ(50px);
}    
.cube:hover .out_front{
    transform:rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
    transform: translateZ(-200px)rotateY(180deg);
}
.cube:hover .out_left{
    transform:rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
    transform:rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
    transform:rotateX(90deg) translateZ(200px);
}    
.cube:hover .out_bottom{
    transform:rotateX(-90deg) translateZ(200px);
}

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>我爱她</title>
        <style type="text/css">
            html{
                background:black;
                height: 100%;
            }
            
            .wrap{
                position: relative;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 200px;
                height: 200px;
                margin: auto;
            }
            .cube{
                width: 200px;
                height: 200px;
                margin: 0 auto;
                transform-style: preserve-3d;
                transform:rotateX(-30deg) rotateY(-80deg) ;
                -webkit-animation:rotate 20s infinite;
                animation-timing-function:linear ;    
            }
            @-webkit-keyframes rotate{
                    from{transform: rotateX(0deg) rotateY(0deg);}
                    to{transform: rotateX(360deg) rotateY(360deg);}
                }
            .cube div{
                position: absolute;
                width: 200px;
                height: 200px;
                opacity: 0.8;
                transition: all.4s;
            }
            .pic{
                width: 200px;
                height: 200px;
            }
            .cube.out_front{
                transform: rotateY(0deg) translateZ(100px);
            }
            .cube.out_back{
                transform: translateZ(-100px) rotateY(180deg);
            }
            .cube.out_left{
                transform: rotateY(90deg) translateZ(100px);
            }
            .cube.out_right{
                transform: rotateY(-90deg)translateZ(100px);
            }
            .cube.out_top{
                transform: rotateX(90deg)translateZ(100px);
            }
            .cube.out_bottom{
                transform: rotateX(-90deg)translateZ(100px);
            }
            
            
             span{
                display:block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }    
            .in_pic{
                width: 100px;
                height: 100px;
            }
            .in_front{
                transform: rotateY(0deg) translateZ(50px) ;
            }
            .in_back{
                transform:translateZ(-50px)  rotateY(180deg);
            }
            .in_left{
                transform:rotateY(90deg) translateZ(50px);
            }
            .in_right{
                transform:rotateY(-90deg) translateZ(50px);
            }    
            .in_top{
                transform:rotateX(90deg) translateZ(50px);
            }    
            .in_bottom{
                transform:rotateX(-90deg) translateZ(50px);
            }    
            
            
            
            
            
            .cube:hover .out_front{
                transform:rotateY(0deg) translateZ(200px);
            }
            .cube:hover .out_back{
                transform: translateZ(-200px)rotateY(180deg);
            }
            .cube:hover .out_left{
                transform:rotateY(90deg) translateZ(200px);
            }
            .cube:hover .out_right{
                transform:rotateY(-90deg) translateZ(200px);
            }
            .cube:hover .out_top{
                transform:rotateX(90deg) translateZ(200px);
            }    
            .cube:hover .out_bottom{
                transform:rotateX(-90deg) translateZ(200px);
            }
        </style>
    
    </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" >
                        </div>
                        <div class="out_right">
                            <img src="img/4.jpg"class="pic" >
                        </div>
                        <div class="out_top">
                            <img src="img/5.jpg"class="pic" >
                        </div>
                        <div class="out_bottom">
                            <img src="img/6.jpg"class="pic" >
                        </div>
                        <span class="in_front">
                            <img src="img/7.jpg"class="in_pic" >
                        </span>
                        <span class="in_back">
                            <img src="img/8.jpg"class="in_pic" >
                        </span>
                        <span class="in_left">
                            <img src="img/9.jpg"class="in_pic" >
                        </span>
                        <span class="in_right">
                            <img src="img/10.jpg" class="in_pic">
                        </span>
                        <span class="in_top">
                            <img src="img/11.jpg" class="in_pic" >
                        </span>
                        <span class="in_bottom">
                            <img src="img/12.jpg"class="in_pic" >
                        </span>
                        </div>
                        </div>
    </body>
</html>

代码效果

灯下晚归人cc
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html相册代码大全
皮小孩的博客
03-15 3万+
本文共有七个相册效果，都十分好看，照片可以替换成女朋友照片。 使用方法： 桌面新建一个文本文档，把代码复制进去，保存后把后缀改为html，双击即可打开页面。有些需要加照片，注意一下命名和文件夹位置即可。 代码1、3、7都是可以直接用的，其他代码css或者js文件没有给出，所以打开可能是空白的，可以去我的资源下载所有代码。html相册代码大全 代码1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
html+css+js-3D动态表白相册
05-20
html+css+js_3D动态表白相册，纯前端的web部分，资源中没有设计后台代码及其数据库部分。资源的包含了该动态相册的源码+参考文章地址，对于初学者来说，该动态相册直接用浏览器即可打开查看相应效果(如果不是预期的效果请用360浏览器打开),edge和谷歌浏览器打开的话能呈现相应效果，但是是静音播放的
【炫酷旋转相册----使用html书写。附全部源代码】
最新发布
2401_84620143的博客
06-17 878
width:100%;left:0;
HTML+CSS实现动画效果
weixin_46058007的博客
03-01 567
前端html+css渲染的页面，有动画效果，三行情诗列表，回旋镖，旋转太极，背景颜色的动画
jQuery实现动画
weixin_41815063的博客
07-26 410
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>很火爆的抖音女朋友相册代码-炫酷旋转相册</title> <link rel="stylesheet" href="img/CSS.css"> </head> <body> <div...
html怎么做成gif,(图解)如何制作gif动态图片
weixin_32203421的博客
06-03 3835
网上非常流行gif格式的动态图片，它体积小、易传输，在即时聊天工具、论坛、SNS社交网络...随处可见它的身影。这些GIF动态图也可以自己制作的哦，平常用手机/相机拍下来的连拍照片，或播放器截取出来的若干张视频截图，都可以合并做成GIF动态图片。下面教你如何制作gif动态图片，速成GIF图片达人。先看看我制作的最终动态图片效果：准备好图片，就可以开始制作了。打开gif动画制作软件，如下图所示，开始...
HTML+CSS+JS制作3D动态相册表白网站代码【程序员专属情人节表白网站】
网页设计与制作 | HTML+CSS+JS
10-03 1396
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如： 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）📜html文件包含：其中index.html是首页、其他html为二级页面； （2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等 （3）📄 js文件包含：页面炫酷效果实现HTML5七夕情人节表白源代码 樱花雨3D相册 🏠CSS样式代码 五、🎁更多源码
用CSS+HTML来制作3D动态旋转相册
qq_46291038的博客
08-25 1051
首先，你要有一个 img文件夹 ------>用来放照片的；然后打开 VSCode 或者是 HBuilderX,接下来 话不多说，上代码 HTML源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" href="css/style.css" rel="style.
用HTML5和CSS3实现3D立体旋转相册
wjm_520的博客
05-01 2127
很快又到了5.20了，是不是应该要给女朋友或者正在追求的妹子一点小惊喜，总说我们程序员不懂浪漫，今天的这篇博客教大家如何实现3D立体相册，赶紧类制作我们程序员的浪漫吧！！！ html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
用html+CSS实现的3D旋转相册（表白代码）
06-03
今天我们将探讨如何使用HTML和CSS这两种基础的前端技术来创建一个独特的3D旋转相册，这不仅是一个展示照片的工具，更是一种浪漫的表白方式。这个3D相册允许用户从多个角度欣赏照片，带来立体视觉效果，为浏览体验...
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
html+css+js 3D相册
04-20
在这个3D相册里，CSS将发挥关键作用，为图片添加三维效果，如旋转、缩放、阴影等。利用CSS3的`transform`属性可以实现3D变换，如`rotateX`、`rotateY`、`rotateZ`用于控制元素的旋转，`translate3d`用于在3D空间中的...
情人节程序员用HTML网页表白【全屏3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
程序员给女朋友用HTML5制作的3D相册
04-21
在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来创建一个既美观又个性化的3D视觉体验。 首先，HTML5的`<canvas>`元素是实现3D效果的关键。`<canvas>`允许开发者在网页上...
HTML——表白（效果+代码）
热门推荐
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
03-03 2万+
目录效果代码说明 效果 代码 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
抖音上很火的3D立体动态相册实现代码!
cs007711的博客
09-08 3197
今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。
HTML实现3D相册
elsfkyxj的博客
12-22 3444
制作简易3D相册的代码（高手勿喷）
HTML+CSS实现动态效果相册
c0210g的博客
09-04 1431
纯HTML+CSS实现的动画效果
HTML旋转相册
m0_61933976的博客
05-17 4364
快快动手做一个旋转相册吧！
html+css+javascript网页制作案例教程源代码
08-01
以下是一个简单的HTML CSS JavaScript网页制作案例教程的源代码： HTML部分： ``` <!DOCTYPE html> <html> 网页制作案例教程 <link rel="stylesheet" type="text/css" href="style.css"> <h1>HTML CSS ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值