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

已于 2023-06-13 16:09:23 修改
阅读量5.9k 收藏 46
点赞数 9
分类专栏： 动画 文章标签： 前端 html
于 2023-02-07 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shids_/article/details/128900187
版权

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 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>

实现效果

在这里插入图片描述

水星记_
关注
  • 9
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
七夕表白程序：3D 立体表白相册（素材+源码），用它的都成功了！
致力于C语言C++知识分享！
08-12 2782
马上就要七夕了，学编程的你没有什么拿得出手的礼物吗？不如用我们所学知识来做个简单的 3D 立体表白相册吧！（特效绝对杠杠的） 希望大家（以及大家的那一位）喜欢! 效果截图如下：（笔者不像在座的各位，老婆还是很多的，所以......） 代码如下： index.html文件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D立体动态
CSS 3D效果
weixin_68485297的博客
04-11 7463
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
教你零基础制作3D旋转相册（送给那个她~）
热门推荐
ChrisPhantom的博客
03-08 1万+
3D立体相册 　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？ 　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D旋转效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！
探索CSS3D.js：轻量级的3D CSS渲染库
最新发布
gitblog_00066的博客
04-27 313
探索CSS3D.js：轻量级的3D CSS渲染库 项目地址:https://gitcode.com/unconed/CSS3D.js CSS3D.js 是一个创新性的JavaScript库，它利用了现代浏览器中的CSS3 3D变换功能，为开发者提供了一种简单、高效的方式来创建2D和3D的交互式场景。如果你正在寻找一种不需要复杂的图形处理库（如Three.js）就能实现3D效果的方式，CSS3D.j...
CSS打造图片翻转立体3D效果
m0_64642443的博客
06-12 2742
css实现图片翻转立体3D效果
Shy-3D立体动态相册实现代码（源代码）
05-20
纯CSS实现鼠标经过3D立体动态展示图片特效代码 @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
炫酷的3DCSS卡片样式
一起学习一起进步~
04-18 984
效果图在文章最后，先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *, *::after, *::before { margin: 0; padding: 0;
纯css 3D立方体特效
qq_42202710的博客
01-06 259
纯css 3D立方体特效 超好看特效哦 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { background:#000; height:100%; } body{ height: 100%;...
相册图片3d旋转html代码_抖音上超火的3D立体动态相册实现代码!
weixin_39897218的博客
12-01 2645
前言：生活处处惊喜，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇文章就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。正文：一、新建一个index.html的文件，代码如下Bubbles (CodePen Circles Challenge)二、css样式的代码html,body { margin: 0; ...
css3实现超立体3D图片侧翻倾斜效果
09-25
主要介绍了css3实现超立体3D图片侧翻倾斜效果,需要的朋友可以参考下
使用CSS3实现一个3D相册效果实例
09-24
在本篇文章中，我们将探讨如何使用CSS3实现一个引人注目的3D相册效果。CSS3的新特性为我们提供了创建动态、立体的图形和布局的能力，使得网页设计更加丰富多彩。以下我们将详细介绍实现3D相册的关键步骤和技术。 ...
纯css实现立体摆放图片效果的实例代码
09-22
主要介绍了纯css实现立体摆放图片效果的实例代码,需要的朋友可以参考下
3d旋转相册源码
12-16
3d旋转相册源码，用纯CSS3代码写的一个小案例，难度不大
html+css3三维立体相册
12-14
一个三维立体的相册,可以拖拽图片进去和旋转立体模型,有一个良好三维效果的相册,如果你正在学习css3三维空间，可以学习下，欢迎交流~~
用html+CSS实现的3D旋转相册（表白代码）
06-03
这个3D相册允许用户从多个角度欣赏照片，带来立体视觉效果，为浏览体验增添了一种互动性。 首先，HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则负责定义这些内容的外观和布局。在3D旋转相册...
纯CSS实现3D按钮效果实例代码
09-24
总结来说，通过巧妙地运用`box-shadow`、`:active`伪类、`transition`和`position`属性，我们可以用纯CSS轻松地实现一个具有3D立体感的按钮效果。这种技术在网页设计中非常实用，能够为用户带来更好的交互体验，同时...
纯CSS实现超酷炫3D圣诞树效果
12-25
纯CSS+HTML实现的圣诞树动画效果 3D效果 代码简单易懂 学习与实用的不二之选 包含旋转效果，带光晕，底部带阴影效果，还有星光点缀其间，场景梦幻，代码简单，小白也能看的懂，老鸟也能有启发，快快下载体验吧！ ...
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6245
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
HTML+CSS完成3D相册
weixin_55763489的博客
10-24 572
HTML+CSS完成3D相册
用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立体旋转相册。如果您还有其他问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值