1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             html{
  8.                 perspective: 800px;
  9.             }
  10.  
  11.             .cube{
  12.                 width: 200px;
  13.                 height: 200px;
  14.                 background-color:#BBFFAA;
  15.                 margin: 100px auto;
  16.                 /* 设置3D变形效果 */
  17.                 transform-style: preserve-3d;
  18.                 /* transform: rotateX(45deg) rotateZ(45deg); */
  19.                 animation: rotate 20s infinite linear;
  20.             }
  21.  
  22.             .cube > div{
  23.                 width: 200px;
  24.                 height: 200px;
  25.                 /* 为元素设置透明效果 */
  26.                 opacity: 0.7;
  27.                 position: absolute;
  28.             }
  29.  
  30.             img{
  31.                 vertical-align: top;
  32.             }
  33.  
  34.             /* 左面 */
  35.             .box1{
  36.                 transform: rotateY(90deg) translateZ(100px);
  37.             }
  38.  
  39.             /* 右面 */
  40.             .box2{
  41.                 transform: rotateY(-90deg) translateZ(100px);
  42.             }
  43.  
  44.             /* 上面 */
  45.             .box3{
  46.                 transform: rotateX(90deg) translateZ(100px);
  47.             }
  48.  
  49.             /* 下面 */
  50.             .box4{
  51.                 transform: rotateX(-90deg) translateZ(100px);
  52.             }
  53.  
  54.             /* 前面 */
  55.             .box5{
  56.                 transform: rotateY(180deg) translateZ(100px);
  57.             }
  58.  
  59.             /* 后面 */
  60.             .box6{
  61.                 transform: rotateY(0deg) translateZ(100px);
  62.             }
  63.  
  64.             @keyframes rotate{
  65.                 from{
  66.                     transform: rotateX(0) rotateZ(0);
  67.                 }
  68.                 to{
  69.  
  70.                     transform: rotateX(1turn) rotateZ(1turn);
  71.                 }
  72.             }
  73.         </style>
  74.     </head>
  75.     <body>
  76.         <!-- 创建一个外部容器 -->
  77.         <div class="cube">
  78.             <div class="box1">
  79.                 <img src="./img/14/1.jpg">
  80.             </div>
  81.  
  82.             <div class="box2">
  83.                 <img src="./img/14/2.jpg">
  84.             </div>
  85.  
  86.             <div class="box3">
  87.                 <img src="./img/14/3.jpg">
  88.             </div>
  89.  
  90.             <div class="box4">
  91.                 <img src="./img/14/4.jpg">
  92.             </div>
  93.  
  94.             <div class="box5">
  95.                 <img src="./img/14/5.jpg">
  96.             </div>
  97.  
  98.             <div class="box6">
  99.                 <img src="./img/14/6.jpg">
  100.             </div>
  101.         </div>
  102.     </body>
  103. </html>

所用图片：

3D相册 复仇者联盟的更多相关文章

  1. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  2. 程序员用HTML5给女朋友制作的3D相册

    程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...

  3. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

  4. 使用html+css+js实现3D相册

    使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...

  5. 基于CSS3和jQuery实现的3D相册

    天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧. 在线预览   源码下载 实现的代码: <div c ...

  6. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

  7. 制作简易的3D相册

      今天介绍一下3D相册,用到了开源的FeatureCoverFlow控件,之前的几个作品用的也全都是开源的控件,为什么要用开源的控件呢,因为...他稳定啊! 1.准备   仍然是,去掉标题栏,然后导 ...

  8. Android 一个3D相册源码

    我们专业课有Android的学习,最后老师让做一个简单的Android应用程序.我在网上找些资料,加上自己改造一下做了一个3D相册. 程序仿照Android的相册功能,调用Gallery类对相片进行浏 ...

  9. 七夕节表白3d相册制作(html5+css3)

    七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...

  10. 3d相册展示

    示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

随机推荐

  1. Python tkinter的简单使用，在绘布上播放GIF和图片

    Python tkinter的简单使用,在绘布上播放GIF和图片 文章目录 Python tkinter的简单使用,在绘布上播放GIF和图片 前言 一.tkinter 的简单组件以及pack(),gr ...

  2. 基于CentOS 7.6安装及配置APISIX 3.0环境

    最近一直在研究微服务相关内容,通过对比各大API网关,发现新起之秀 APISIX无论从开源程度上来讲还是功能上,都拥有很大的优势. 经历了几天折磨一样的学习,目前在本地环境中配置成功了一套,以供自己留 ...

  3. 2022-04-20：小团去参加军训，军训快要结束了， 长官想要把大家一排n个人分成m组，然后让每组分别去参加阅兵仪式， 只能选择相邻的人一组，不能随意改变队伍中人的位置， 阅兵仪式上会进行打分，其中

    2022-04-20:小团去参加军训,军训快要结束了, 长官想要把大家一排n个人分成m组,然后让每组分别去参加阅兵仪式, 只能选择相邻的人一组,不能随意改变队伍中人的位置, 阅兵仪式上会进行打分,其中 ...

  4. golang基础面试题，不完整

    启动流程 Q.go的init函数是什么时候执行的? Q.多个init函数执行顺序能保证吗? Q.go init 的执行顺序,注意是不按导入规则的(这里是编译时按文件名的顺序执行的) Q.init函数能 ...

  5. Django接入SwaggerAPI接口文档-完整操作（包含错误处理）

    Swagger的简介: Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务,在做后端开发的同时自动生成一个API文档供前端查看,当接口有变动时,对应的接口 ...

  6. windows-重启打印服务

    @echo off color a net stop spooler net start spooler ping -n 4 localhost >nul

  7. Django 14天从小白到进阶- Day1 Django 初识

    来自作者:金角大王 本节内容 Http原理介绍 自行开发一个Web框架 WSGI介绍 Django介绍 MVC/MTV Django安装 创建项目与APP 开发第一个页面 为什么学Django? Go ...

  8. shader编程基础：画线

    以sin曲线为例,任何函数曲线画法类似. 画线原理虽然十分简单,却是复杂图形曲线绘制的基础. uv和smoothstep等函数不清楚请参考跳转链接: shader编程基础:画圆 #define T . ...

  9. 【Vue2.x源码系列08】Diff算法原理

    什么是虚拟DOM DOM是很慢的,其元素非常庞大,当我们频繁的去做 DOM更新,会产生一定的性能问题,我们可以直观感受一下 div元素包含的海量属性 在Javascript对象中,虚拟DOM 表现为一 ...

  10. ODOO13之 八：Odoo 13开发之业务逻辑 – 业务流程的支持

    在前面的文章中,我们学习了模型层.如何创建应用数据结构以及如何使用 ORM API 来存储查看数据.本文中我们将利用前面所学的模型和记录集知识实现应用中常用的业务逻辑模式. 本文的主要内容有: 以单据 ...