<!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. 2022-04-22：给你一个大小为 m x n 的矩阵 board 表示甲板，其中，每个单元格可以是一艘战舰 ‘X‘ 或者是一个空位 ‘.‘ ，返回在甲板 board 上放置的 战舰 的数量。 战舰

    2022-04-22:给你一个大小为 m x n 的矩阵 board 表示甲板,其中,每个单元格可以是一艘战舰 'X' 或者是一个空位 '.' ,返回在甲板 board 上放置的 战舰 的数量. 战舰 ...

  2. 2021-05-23：给定一个字符串str，str表示一个公式，公式里可能有整数、加减乘除符号和左右括号。返回公式的计算结果，难点在于括号可能嵌套很多层。str=“48*((70-65)-43)+8*

    2021-05-23:给定一个字符串str,str表示一个公式,公式里可能有整数.加减乘除符号和左右括号.返回公式的计算结果,难点在于括号可能嵌套很多层.str="48*((70-65)-4 ...

  3. Selenium - 浏览器配置(1) - 忽略证书错误提示

    Selenium - 浏览器配置 忽略证书错误提示 有时候我们访问一些地址,会提示证书私密连接告警信息如下: 如果我们每次要点击高级来忽略私密连接,那就很麻烦: 在谷歌浏览器可以增加忽略证书错误问题, ...

  4. dnu

    背景 作为一个喜欢搬运 YouTube 视频的网友,我发现将视频下载下来再上传到 B 站十分繁琐,因此我决定开发一个小工具,能够方便快捷地将 YouTube 视频下载并上传至 B 站,以节省我的时间和 ...

  5. 使用android studio发布android与flutter混合开发项目

    一.生成androd签名证书 Android studio的Build > Grenerate Signed Bundle 选择apk 点击Create New 录入对应的签名信息:点击确定 对 ...

  6. Linux之从进程角度来理解文件描述符

    文件描述符是一个非负整数,而内核需要通过这个文件描述符才可以访问文件.当我们在系统中打开已有的文件或新建文件时,内核每次都会给特定的进程返回一个文件描述符,当进程需要对文件进行读或写操作时,都要依赖这 ...

  7. 【jmeter】测试socket接口的简单应用

    一.场景 有一天开发问我,有没有什么工具可以测试socket,tcp,当时有点懵,这种需求还是少见 二.方法 使用Jmeter可以进行相关的测试 三.创建服务端环境 使用python搞个socket服 ...

  8. 逍遥自在学C语言 | 宏定义技巧让你的C代码快人一步

    前言 在C语言中,宏定义是一种预处理指令,用于在代码中定义和使用常量.函数或代码片段的替代. 宏定义使用#define关键字来定义,并在代码中进行替换.宏定义具有以下优点: 简化代码:宏定义可以将一些 ...

  9. 【LeetCode】Find Pivot Index #724 Rust Solution

    给定一个整数类型的数组 nums,请编写一个能够返回数组 "中心索引" 的方法.我们是这样定义数组 中心索引 的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和.如果数 ...

  10. 如何在 Memcache 与 Redis 中做选择？

    memcache vs redis Memcached和Redis都是流行的内存缓存系统,用于提高应用程序的性能和响应速度.它们有一些相似之处,但也有一些区别.以下是Memcached和Redis之间 ...