<!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. lombok版本报错问题java.lang.IllegalAccessError: class lombok.javac.apt.LombokProcessor (in unnamed module

    lombok版本报错问题 记录一个项目部署时遇到的问题,我本地采用的JDK8的版本,然后我的服务器采用的是JDK17,然后在用maven进行打包的时候,发现package失败. 复现 我在本地采用的l ...

  2. 2023-05-07：给你一个大小为 n x n 二进制矩阵 grid 。最多 只能将一格 0 变成 1 。 返回执行此操作后，grid 中最大的岛屿面积是多少？ 岛屿 由一组上、下、左、右四个方向相

    2023-05-07:给你一个大小为 n x n 二进制矩阵 grid .最多 只能将一格 0 变成 1 . 返回执行此操作后,grid 中最大的岛屿面积是多少? 岛屿 由一组上.下.左.右四个方向相 ...

  3. 2020-12-18：java和go，并发控制有哪几种方式？

    福哥答案2020-12-18: java:锁(Synchronized, ReentrantLock).信号量(Semaphore)以及其他同步工具.原子类(atomicInteger).加法器(ad ...

  4. 2022-02-01：粉刷房子 II。 假如有一排房子，共 n 个，每个房子可以被粉刷成 k 种颜色中的一种，你需要粉刷所有的房子并且使其相邻的两个房子颜色不能相同。 当然，因为市场上不同颜色油漆的价

    2022-02-01:粉刷房子 II. 假如有一排房子,共 n 个,每个房子可以被粉刷成 k 种颜色中的一种,你需要粉刷所有的房子并且使其相邻的两个房子颜色不能相同. 当然,因为市场上不同颜色油漆的价 ...

  5. 2021-08-18：扰乱字符串。使用下面描述的算法可以扰乱字符串 s 得到字符串 t ：1.如果字符串的长度为 1 ，算法停止。2.如果字符串的长度 ＞ 1 ，执行下述步骤：在一个随机下标处将字符串

    2021-08-18:扰乱字符串.使用下面描述的算法可以扰乱字符串 s 得到字符串 t :1.如果字符串的长度为 1 ,算法停止.2.如果字符串的长度 > 1 ,执行下述步骤:在一个随机下标处将 ...

  6. Django4全栈进阶之路8 createsuperuser创建超级管理员账号

    在 Django 4 中,可以使用 createsuperuser 命令来创建超级管理员账号.超级管理员拥有管理后台的所有权限,包括创建.编辑和删除用户.组.权限等操作. 下面是创建超级管理员账号的步 ...

  7. django model字段类型

    1.models.AutoField 自增列=int(11) 如果没有的话,默认会生成一个名称为id的列,如果要显示的定义一个自增列,必须把该列设置为主键(primary_key=True)2.mod ...

  8. Github Copilot Chat 初体验

    最近因为阳了的缘故一直躺在床上.今天终于从床上爬起来了.不是因为好透了,而是因为我收到了申请Copilot Chat preview 权限通过的邮件.实在忍不住,于是起床开电脑在咳嗽声中进行了一番体验 ...

  9. 【Linux】详解Centos7的下载安装配置

    本文时间 2023-05-17 作者:sugerqube漆瓷 为什么是Centos7 centos8已经停止维护,centos7将在2024-06-30停止维护(所以暂时选7) 未来替代品参考: Al ...

  10. macbook苹果m1芯片训练机器学习、深度学习模型,resnet101在mnist手写数字识别上做加速，torch.device("mps")

    apple的m1芯片比以往cpu芯片在机器学习加速上听说有15倍的提升,也就是可以使用apple mac训练深度学习pytorch模型!!!惊呆了 安装apple m1芯片版本的pytorch 然后使 ...