<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            html{

                perspective: 800px;

            }

            .cube{

                width: 200px;

                height: 200px;

                background-color:#BBFFAA;

                margin: 100px auto;

                /* 设置3D变形效果 */

                transform-style: preserve-3d;

                /* transform: rotateX(45deg) rotateZ(45deg); */

                animation: rotate 20s infinite linear;

            }

            .cube > div{

                width: 200px;

                height: 200px;

                /* 为元素设置透明效果 */

                opacity: 0.7;

                position: absolute;

            }

            img{

                vertical-align: top;

            }

            /* 左面 */

            .box1{

                transform: rotateY(90deg) translateZ(100px);

            }

            /* 右面 */

            .box2{

                transform: rotateY(-90deg) translateZ(100px);

            }

            /* 上面 */

            .box3{

                transform: rotateX(90deg) translateZ(100px);

            }

            /* 下面 */

            .box4{

                transform: rotateX(-90deg) translateZ(100px);

            }

            /* 前面 */

            .box5{

                transform: rotateY(180deg) translateZ(100px);

            }

            /* 后面 */

            .box6{

                transform: rotateY(0deg) translateZ(100px);

            }

            @keyframes rotate{

                from{

                    transform: rotateX(0) rotateZ(0);

                }

                to{

                    transform: rotateX(1turn) rotateZ(1turn);

                }

            }

        </style>

    </head>

    <body>

        <!-- 创建一个外部容器 -->

        <div class="cube">

            <div class="box1">

                <img src="./img/14/1.jpg">

            </div>

            <div class="box2">

                <img src="./img/14/2.jpg">

            </div>

            <div class="box3">

                <img src="./img/14/3.jpg">

            </div>

            <div class="box4">

                <img src="./img/14/4.jpg">

            </div>

            <div class="box5">

                <img src="./img/14/5.jpg">

            </div>

            <div class="box6">

                <img src="./img/14/6.jpg">

            </div>

        </div>

    </body>

</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. java封装和关键字

    一.封装 封装:告诉我们如何正确设计对象的属性和方法 对象代表什么,就得封装对应的数据,并提供数据对应的行为 封装的好处: 让编程变得很简单,有什么事,找对象,调方法 降低学习成本,可以少学,少记,或 ...

  2. SQL Server数据库判断最近一次的备份执行结果

    1 麻烦的地方 在SQL Server的官方文档里面可以看到备份和还原的表,但是这些表里面只能找到备份成功的相关信息,无法找到备份失败的记录,比如msdb.dbo.backupset.对于一些监控系统 ...

  3. 【python爬虫】bilibili综合热门页面视频图片爬取

    此博客仅作为交流学习 我用python来爬取bilibili综合热门页面视频图片 首先分析页面: 如上图所示,当我们想要在页面爬取图片时,往往得不到页面图片的地址,这时我们也得不到图片 开始抓包分析: ...

  4. postman接口关联-token值

    背景: 在测试工作中,测试鉴权的接口需要用到登录接口的token,需要我们先调用登录接口,获得token,然后把即时获得的token填入请求中发送请求,我们可以用设置全局变量的办法解决这个问题   实 ...

  5. 06、HSMS协议介绍

    本章的内容主要参考了 SECS半导体设备通讯-2 HSMS通信标准 ,外加上自己看的一些其他的文档.也加上了一些自己的理解,特此记录.若有侵权,请联系删除,谢谢. 再次特别感谢 SECS半导体设备通讯 ...

  6. [音视频处理] FFmpeg使用指北1-视频解码

    本文将详细介绍如何使用ffmpeg 4.4在C++中解码多种格式的媒体文件,这些媒体文件可以是视频.视频流.图片,或是桌面截屏或USB摄像头的实时图片.解码文件后,还将每帧图片转换为OpenCV的Ma ...

  7. Spring Boot 3.1中如何整合Spring Security和Keycloak

    在今年2月14日的时候,Keycloak 团队宣布他们正在弃用大多数 Keycloak 适配器.其中包括Spring Security和Spring Boot的适配器,这意味着今后Keycloak团队 ...

  8. 如何在2023年开启React项目

    在这里,我想给你一个新的React项目入门的简要概述.我想反思一下优点和缺点,反思一下作为一个开发者所需要的技术水平,反思一下作为一个React开发者,每个启动项目都能为你提供哪些功能.最后,你将了解 ...

  9. Python modbus_tk 库源码分析

    modbus_tk 源代码分析 前言 modbus_tcp 协议是工业项目中常见的一种基于 TCP/IP 协议的设备数据交互协议. 作为 TCP/IP 协议的上层协议,modbus_tcp 协议涉及到 ...

  10. Helm实战案例二：在Kubernetes(k8s)上使用helm安装部署日志管理系统EFK

    目录 一.系统环境 二.前言 三.日志管理系统EFK简介 四.helm安装EFK 4.1 helm在线安装EFK 4.2 helm离线安装EFK(推荐) 五.访问kibana 5.1 数据分片 六.卸 ...