前端CSS3实现3D相册小案例

已于 2023-09-02 12:55:59 修改
阅读量702 收藏 5
点赞数
分类专栏： 前端 # HTML_CSS 文章标签： css html5 html
于 2021-05-10 22:47:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46168848/article/details/116614082
版权

前端CSS3实现3D相册小案例

HTML代码部分：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>3D相册</title> 
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 

<body> 
<div class="box"> 
<ul class="minbox"> 
<li><img src="3D相册图片/01.jpg" width="100" height="100"></li> 
<li><img src="3D相册图片/02.jpg" width="100" height="100"></li> 
<li><img src="3D相册图片/03.jpg" width="100" height="100"></li> 
<li><img src="3D相册图片/04.jpg" width="100" height="100"></li> 
<li><img src="3D相册图片/05.jpg" width="100" height="100"></li> 
<li><img src="3D相册图片/06.jpg" width="100" height="100"></li> 
</ul> 
<ol class="maxbox"> 
<li><img src="3D相册图片/1.jpg" width="400" height="400"></li> 
<li><img src="3D相册图片/2.jpg" width="400" height="400"></li> 
<li><img src="3D相册图片/3.jpg" width="400" height="400"></li> 
<li><img src="3D相册图片/4.jpg" width="400" height="400"></li> 
<li><img src="3D相册图片/5.jpg" width="400" height="400"></li> 
<li><img src="3D相册图片/6.jpg" width="400" height="400"></li> 
</ol> 
</div> 
</body> 
</html>

CSS部分代码：

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

在这里插入图片描述

岁月的眸
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年前端最新html3D创意相册附源码_html相册源码，web开发平台
2401_84435686的博客
05-06 1000
width:100%;你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。o!= null;if (type!}, false);!
HTML+CSS实现3D立体相册
jlb240的博客
04-19 340
html+css实现3d旋转相册
CSS+HTML 3D相册
04-10
基于css，jquery，html的3D旋转相册，炫酷实用，有效。
实现3D立体相册
huhuhuja
12-03 252
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <style> @charset.
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
最新发布
12-26 465
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录一、网页介绍一、网页效果二、
如何使用CSS3实现一个3D相册
weixin_34413065的博客
12-01 249
CSS3系列我已经写过两篇文章了，在这贴出链接，感兴趣的同学可以看一下CSS3初体验之奇技淫巧，CSS3 3D立方体效果－transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法；第二篇是一个用CSS3实现的立方体实例，详细讲解了3D旋转和transform等属性。 本文再来利用CSS3属性来编写一个实例，话不多说，先直接看看效果。3D相册实例DEMO戳我 因为前面已经讲解...
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8798
html+css小练手
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6030
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
HTML5 动画效果 ------ 旋转的小球、CSS旋转木马3D相册效果
你好，明天，，的博客
03-27 1683
css3实现动画效果 基本知识点： Css3常用到的几个属性：transform（变形），transition（过渡），animation（动画） transform translate：平移，移动，水平方向、垂直方向（translateX，translateY，translateZ等） scale：缩放；扩大缩小，水平方向、垂直方向（scaleX，scaleY，ScaleZ等...
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
html3d制作图片php安,如何使用html+css+js实现3D相册
weixin_29353431的博客
03-24 566
使用html+css+js实现3D相册，快来上传的照片吧效果图：代码如下，复制即可用：Titlehtml,body {margin: 0;padding: 0;background-color: #29454d;/*禁止文字被选中*/-moz-user-select: none;/*火狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select...
程序员给女朋友用HTML5制作的3D相册免费(附源码)
04-28
一个高大上的HTML5作品,是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!源码下载:CSDN下载频道或来自ypxyangyangyang的整理。...
html5的3D相册
12-11
html5的3D相册代码，其中jpg因人而异，采用前端技术的一个小制作。
H5前端_高级实战案例_手风琴相册设计（css）.rar
11-01
CSS实例。可嵌入做毕业设计，实现手风琴相册设计，界面简洁高大上，超简单的代码就能实现，全文注释。
基于CSS的旋转木马相册的案例，页面简洁炫酷适合拿来做网页
09-25
基于HTML+CSS3，适合新入门前端的小白新人，用到了3D的相关知识点，复习巩固做网页都是好选择
蜂窝个性模特相册展示html5模板_蜂窝 个性 模特 相册 摄影 案例 图片 展示 html5 css3.zip
02-20
蜂窝个性模特相册展示html5模板_蜂窝 个性 模特 相册 摄影 案例 图片 展示 html5 css3.zip蜂窝个性模特相册展示html5模板_蜂窝 个性 模特 相册 摄影 案例 图片 展示 html5 css3.zip
H5前端_高级实战案例_图片（相册）展示设计Ⅱ（css）.rar
11-01
CSS+JS实例。可嵌入做毕业设计，实现相册图片功能，界面简洁高大上，超简单的代码就能实现，全文注释。
H5前端_高级实战案例_图片（相册）展示设计Ⅲ（css）.rar
11-01
CSS+JS实例。可嵌入做毕业设计，实现相册图片功能，界面简洁高大上，超简单的代码就能实现，全文注释。
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...
用HTML5和CSS3实现3D立体旋转相册
06-03
好的，这是一个比较复杂的问题，需要一定的HTML5和CSS3技能，我会尽可能地为您解答。首先，我们需要一个包含所有图片的容器，然后通过CSS3的transform属性来实现3D旋转效果。 以下是一个基本的HTML结构： ``` <div class="container"> <figure class="card"> <img src="image1.jpg"> </figure> <figure class="card"> <img src="image2.jpg"> </figure> <figure class="card"> <img src="image3.jpg"> </figure> <figure class="card"> <img src="image4.jpg"> </figure> <figure class="card"> <img src="image5.jpg"> </figure> </div> ``` 然后，我们需要为容器和每个图片分别设置样式： ``` .container { perspective: 1000px; /* 设置透视距离 */ width: 500px; margin: 0 auto; } .card { display: inline-block; width: 200px; height: 150px; margin: 20px; transform-style: preserve-3d; /* 启用3D变换 */ transition: transform 1s; /* 设置过渡效果 */ } .card:hover { transform: rotateY(180deg); /* 鼠标悬停时旋转180度 */ } .card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; /* 隐藏反面 */ } ``` 这里我们使用了perspective属性来设置透视距离，使得图片在旋转时可以呈现出3D效果。同时，我们使用transform-style属性启用了3D变换，并且设置了过渡效果，使得旋转时更加平滑。当鼠标悬停在图片上时，我们通过transform属性旋转图片180度，实现立体旋转的效果。 最后，我们需要通过CSS3的动画效果来使得相册自动旋转。以下是示例代码： ``` .container { animation: spin 10s infinite linear; } @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } ``` 这里我们设置了一个名为spin的动画，使得容器在10秒内无限循环旋转360度。通过这个动画，我们就可以实现一个自动旋转的3D相册。 希望这个简单的示例能够帮助您理解如何使用HTML5和CSS3实现3D立体旋转相册。如果您还有其他问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值