教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP

article/2025/8/23 17:18:16

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 css3 实现 3d 效果的立方体相册，下面一起看看吧。

实现思路

  • 首先我们要确定好 html 的结构以及要使用的标签；
  • 当我们搭建好 html 的结构后，就要想到怎么去实现立体的效果；
  • 最后就是如何实现旋转以及鼠标触摸时变换的效果。

html 布局

<div class="parentBox"><div class="contantBox"><div class="outerBox"><!--======================= 外部正方体 =======================--><!-- 外前图 --><div class="frontImgBox"><img src="../assets/tu1.jpg" /></div><!-- 外后图 --><div class="queenImgBox"><img src="../assets/tu2.jpg" /></div><!-- 外左图 --><div class="liftImgBox"><img src="../assets/tu3.jpg" /></div><!-- 外右图 --><div class="rightImgBox"><img src="../assets/tu4.jpg" /></div><!-- 外上图 --><div class="topImgBox"><img src="../assets/tu5.jpg" /></div><!-- 外下图 --><div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div><!--======================= 内部正方体 =======================--><!-- 内前图 --><p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p><!-- 内后图 --><p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p><!-- 内左图 --><p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p><!-- 内右图 --><p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p><!-- 内上图 --><p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p><!-- 内下图 --><p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p></div></div>
</div>

立体的效果

立体效果的核心就是运用 css3 中的 transform-style 属性。

transform-style 属性

transform-style 属性用来指定嵌套元素是怎样在三维空间中呈现。当值为 flat 时，表示所有子元素在 2D 平面呈现；值为 preserve-3d 时，表示所有子元素在 3D 空间中呈现。

属性值描述
flat（默认值）将设置元素的子元素位于该元素的平面中
preserve-3d将指示元素的子元素应位于 3D 空间中

注意：

  • 该属性必须与 transform 属性一同使用，否则没效果；
  • 该属性不能被子元素继承；
  • 该属性的效果作用于子元素，不作用于自身。

旋转和变换的效果

旋转及变换的效果我们则需要通过 animation 属性和 hover 伪类属性的配合来实现。

旋转核心代码

	.outerBox{-webkit-animation: rotate 10s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}

变换核心代码

.outerBox:hover .frontImgBox {transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {transform: rotateX(-90deg) translateZ(200px);
}

到这里为止，我们已经将整个功能的核心要点分析完毕，话不多说，下面一起来看完整的源码⤵。

完整源码

<template><div class="parentBox"><div class="contantBox"><div class="outerBox"><!--======================= 外部正方体 =======================--><!-- 外前图 --><div class="frontImgBox"><img src="../assets/tu1.jpg" /></div><!-- 外后图 --><div class="queenImgBox"><img src="../assets/tu2.jpg" /></div><!-- 外左图 --><div class="liftImgBox"><img src="../assets/tu3.jpg" /></div><!-- 外右图 --><div class="rightImgBox"><img src="../assets/tu4.jpg" /></div><!-- 外上图 --><div class="topImgBox"><img src="../assets/tu5.jpg" /></div><!-- 外下图 --><div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div><!--======================= 内部正方体 =======================--><!-- 内前图 --><p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p><!-- 内后图 --><p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p><!-- 内左图 --><p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p><!-- 内右图 --><p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p><!-- 内上图 --><p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p><!-- 内下图 --><p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p></div></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 200px;.contantBox {width: 200px;height: 200px;margin: 0px auto;position: relative;.outerBox {width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 10s infinite;animation-timing-function: linear; //匀速// 外部正反体样式div {position: absolute;width: 200px;height: 200px;opacity: 0.75;transition: all 0.4s;img {width: 100%;height: 100%;}}.frontImgBox {transform: rotateY(0deg) translateZ(100px);}.queenImgBox {transform: translateZ(-100px) rotateY(180deg);}.liftImgBox {transform: rotateY(90deg) translateZ(100px);}.rightImgBox {transform: rotateY(-90deg) translateZ(100px);}.topImgBox {transform: rotateX(90deg) translateZ(100px);}.bottomImgBox {transform: rotateX(-90deg) translateZ(100px);}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}// 内部正方体样式p {display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;img {width: 100%;height: 100%;}}.inFrontImgBox {transform: rotateY(0deg) translateZ(50px);}.inqueenImgBox {transform: translateZ(-50px) rotateY(180deg);}.inLeftImgBox {transform: rotateY(90deg) translateZ(50px);}.inRightImgBox {transform: rotateY(-90deg) translateZ(50px);}.inTopImgBox {transform: rotateX(90deg) translateZ(50px);}.inBottomImgBox {transform: rotateX(-90deg) translateZ(50px);}}// 鼠标触摸后样式.outerBox:hover {cursor: pointer;}.outerBox:hover .frontImgBox {transform: rotateY(0deg) translateZ(200px);}.outerBox:hover .queenImgBox {transform: translateZ(-200px) rotateY(180deg);}.outerBox:hover .liftImgBox {transform: rotateY(90deg) translateZ(200px);}.outerBox:hover .rightImgBox {transform: rotateY(-90deg) translateZ(200px);}.outerBox:hover .topImgBox {transform: rotateX(90deg) translateZ(200px);}.outerBox:hover .bottomImgBox {transform: rotateX(-90deg) translateZ(200px);}}
}
</style>

实现效果

在这里插入图片描述

拓展

旋转视差效果

<template><div class="box"><div class="item"><img src="../../img/fj1.png" alt=""></div><div class="item"><img src="../../img/fj2.png" alt=""></div><div class="item"><img src="../../img/fj3.png" alt=""></div><div class="item"><img src="../../img/fj4.png" alt=""></div><div class="item"><img src="../../img/fj5.png" alt=""></div></div>
</template><style scoped>
.box {width: 300px;height: 300px;margin: 0 auto;margin-top: 100px;/* 网格布局 */display: grid;grid-template-columns: repeat(3, 1fr); /* 3列 */grid-template-rows: repeat(3, 1fr); /* 3行 */grid-template:"A A B""C D B""C E E";gap: 5px; /* 间隙 */animation: rotation 10s linear infinite;
}
.item {overflow: hidden;border: 2px solid;display: flex;justify-content: center;align-items: center;
}
.item img {width: 260%;height: 260%;object-fit: cover;animation: rotation2 10s linear infinite;
}
/* 布局到那个区域 */
.item:nth-child(1) {grid-area: A;
}
.item:nth-child(2) {grid-area: B;
}
.item:nth-child(3) {grid-area: C;
}
.item:nth-child(4) {grid-area: D;
}.item:nth-child(5) {grid-area: E;
}
/* 外层顺时针旋转 */
@keyframes rotation {to {transform: rotate(360deg);}
}
/* 外层逆时针旋转 */
@keyframes rotation2 {to {transform: rotate(-360deg);}
}
</style>

实现效果

在这里插入图片描述


http://chatgpt.dhexx.cn/article/1utxVeYL.shtml

相关文章

HTML+CSS实现3D立体相册

HTML+CSS实现3D立体相册

程序员的浪漫&#xff0c;话不多说上代码。 HTML: <body><div id"cube"><!--外层盒子--><ul><li><img src"./imgs/1.jpg" ></li><li><img src"./imgs/2.jpg" ></li><li>&l…
阅读更多...
该换壁纸啦，记录一个用CSS和HTML做的3D立体相册

该换壁纸啦，记录一个用CSS和HTML做的3D立体相册

这几天看东宫沉迷于陈星旭&#xff0c;李承鄞太绝了&#xff01;这不得把壁纸安排上&#xff1f;简单记录一下制作过程。 1、准备照片 需要1张大的背景图和6张3d相册用图存放在img文件夹中。 可以先使用PS、美图秀秀或者其他修图软件等将相册用图改成200px*200px。 注意文件…
阅读更多...
抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...

抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...

前几天分享了一套源码&#xff0c;今天又为大家带来一套类似的源码&#xff0c;希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码&#xff0c;经测试在IE8浏览器下无法预览&#xff0c;建议使用支持HTML5与css3效果较好的360浏览器预览本源码。 代码如…
阅读更多...
H5 3d立体相册 CSS3特性

H5 3d立体相册 CSS3特性

CSS3 变形特性,立方相册,3d旋转 之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞… 一, 准备材料 六张自己喜欢的图片,六个面,怎么简单方便怎么来,名字直接取123456,后缀.jpg,放到img文件夹下一张小图片,大点也不要紧,为了浏…
阅读更多...
js制作3d立体旋转相册

js制作3d立体旋转相册

使用js做一个3d立体旋转相册 可自由拖拽 源码如下 <!DOCTYPE html> <html> <head> <meta charset"utf-8"><title>1</title><style type"text/css">.main{perspective: 800px;}#mian img{width: 200px;height:…
阅读更多...
3D立体动态相册（带背景音乐）HTML+CSS脚本

3D立体动态相册（带背景音乐）HTML+CSS脚本

3D立体动态相册&#xff08;带背景音乐&#xff09;HTMLCSS脚本。程序员硬核送礼方式。。。 动画效果 截图效果&#xff1a; 照片准备&#xff1a; 命名为1、2、3、…… 音乐&#xff1a; 将文件依次放在各自文件夹中&#xff1a; CSS文本&#xff0c;命名&#xff1a;index.…
阅读更多...
抖音3d相册html代码,抖音3D立体相册表白代码.doc

抖音3d相册html代码,抖音3D立体相册表白代码.doc

抖音3D立体相册表白浪漫代码 首先先建立html文件css-3d旋转 之后再新建一个CSS的文件夹 并在css文件夹中建立txt文件&#xff0c;并且把代码复制进去&#xff0c;修改后缀名为.css html{ background: #000; height: 100%; } /*最外层容器样式*/ .wrap{ position: relative; pos…
阅读更多...
打造3D立体相册

打造3D立体相册

项目目录结构&#xff1a; HTML代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><link type"text/css" rel"styleSheet" href"css/wrap.css" /><…
阅读更多...
MATLAB竟也能制作3D相册？教你用MATLAB制作立体动态相册

MATLAB竟也能制作3D相册？教你用MATLAB制作立体动态相册

效果 教程部分 1 图片导入与大小重设 需要有一个名为album的文件夹和当前m文件在同一文件夹&#xff0c;另外ablum文件夹内至少要有一张jpg格式图片 path.\album\;%文件夹名称 filesdir(fullfile(path,*.jpg)); picNumsize(files,1);%遍历路径下每一幅图像 for i1:picNumfi…
阅读更多...
HTML 3d立体旋转相册

HTML 3d立体旋转相册

效果&#xff1a;&#xff08;实际是动态旋转&#xff09; 目录&#xff1a;&#xff08;根据自己需要替换图片就行了 大照片是400*400 小照片是100*100&#xff09; 提取码&#xff1a;1122 代码链接 index.html <!DOCTYPE html> <html lang"en"> <…
阅读更多...
3D立体相册不过是冷锋蓝plus版 html+css

3D立体相册不过是冷锋蓝plus版 html+css

一.话不多&#xff0c;先看效果&#xff1a; 转念一想&#xff0c;好像很久很久没出css特效的文章了&#xff0c;特别是工作之后&#xff0c;更少了。偶然翻看电脑内存的时候&#xff0c;发现这个自己1年多以前写的特效&#xff0c;甚美&#xff0c;又勾起我一段尘封的回忆。。…
阅读更多...
创意相册、3D立体相册

创意相册、3D立体相册

3D表白相册 精美的3D动态相册&#xff0c;快去做给她吧&#xff01; 点我下载 换的图片格式要一样&#xff0c;实在不一样就去代码里面改后缀名 https://download.csdn.net/download/weixin_43474701/60386577
阅读更多...
3D立体相册，一个可旋转的立体相册

3D立体相册，一个可旋转的立体相册

11359.gif 主要功能&#xff1a;立体球体展示 可自行添加本地照片 可旋转&#xff0c;照片可放大 商城下载&#xff1a; App Store github下载 用的代码是用的云标签的code&#xff0c;代码略有改动 主要代码调用 // 调用展示 self.sphereView [[YoungSphere alloc] initWithF…
阅读更多...
还在买鲜花送女神？手把手教你搭建3D立体相册网站，包女神稀饭

还在买鲜花送女神？手把手教你搭建3D立体相册网站，包女神稀饭

是不是一款人见人爱的相册网站&#xff0c;看下图演示马上知晓。360度3D立体旋转&#xff0c;随意放大缩小任一张照片&#xff0c;合适每一个女生的小胃口&#xff0c;保证女神眼前一亮&#xff0c;对您刮目相看。 我们的特点是——情人节圣诞节女神生日纪念日都适合当礼物&am…
阅读更多...
css3 3D立体相册实现

css3 3D立体相册实现

这几天无聊&#xff0c;看到有博主弄的电子相册有点意思&#xff0c;就照葫芦画瓢也实现了一个&#xff0c;一个半透明的正方体包含着一个小正方体&#xff0c;相册自动旋转&#xff0c;当获得焦点时变化效果&#xff0c;截图如下&#xff1a; 一&#xff0c;代码目录结构 二&a…
阅读更多...
3D立体相册 html+css

3D立体相册 html+css

前言 用css的transform属性做一个3D相册~~~ 值translate表示偏移&#xff1b; scale表示缩放&#xff1b; rotate就是转动。 一、先看效果 二、实现步骤 1.我们知道一个正方体有6个面&#xff0c;所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1…
阅读更多...
搭载3D立体相册网页 加入背景音乐 真香！

搭载3D立体相册网页 加入背景音乐 真香！

一、3D立体相册 HTML代码 <!DOCTYPE html> <html lang="en"><head><meta
阅读更多...
七夕表白程序：3D 立体表白相册（素材+源码），用它的都成功了！

七夕表白程序：3D 立体表白相册（素材+源码），用它的都成功了！

马上就要七夕了&#xff0c;学编程的你没有什么拿得出手的礼物吗&#xff1f;不如用我们所学知识来做个简单的 3D 立体表白相册吧&#xff01;&#xff08;特效绝对杠杠的&#xff09; 希望大家&#xff08;以及大家的那一位&#xff09;喜欢! 效果截图如下&#xff1a;&…
阅读更多...
抖音上很火的3D立体动态相册

抖音上很火的3D立体动态相册

带背景音乐网站效果： http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%843D%E7%AB%8B%E4%BD%93%E5%8A%A8%E6%80%81%E7%9B%B8%E5%86%8C.html 如何创建网站：参考我的这篇文章 https://blog.csdn.net/allen_csdns/article/details…
阅读更多...
【Python入门】Python做游戏——跳跃小鸟

【Python入门】Python做游戏——跳跃小鸟

如何运行 安装依赖pip install keras pip install pygame pip install scikit-image pip install h5py作者使用的是theano训练的，训练好的模型文件要使用theano作为Keras的后端才能调用，在配置文件~/.keras/keras.json中（没有可创建）确认/修改backend为theano（如果没有安装…
阅读更多...
推荐文章

Copyright @ 2022~2023