css3 3D相册

最新推荐文章于 2024-02-29 21:02:03 发布
最新推荐文章于 2024-02-29 21:02:03 发布
阅读量680 收藏 2
点赞数 3
分类专栏： css3 文章标签： css3 transform transition animation perspective
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwb123456123456/article/details/82860487
版权 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>旋转相册</title>
    <style type="text/css">
        body,
        div,
        p,
        ul,
        ol,
        li,
        dl,
        dt,
        dd,
        table,
        tr,
        td,
        form,
        hr,
        fieldset,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        img,
        input {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background: black;
            width: 100%;
            height: 100%;
        }

        .bg_box {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .bg_box img {
            position: absolute;
            width: 100%;
            height: 100%;

        }

        .content {
            width: 200px;
            height: 150px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 */
            perspective: 1500px;
            /* perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
            当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
            注释：perspective 属性只影响 3D 转换元素。
            提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。 */

        }

        .box {
            width: 200px;
            height: 150px;
            /* perspective-origin: ( 50% 50%); */
            transform-style: preserve-3d;
            /* transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
            注释：该属性必须与 transform 属性一同使用。 */
            transform: rotateX(-30deg);
            animation: photo 15s linear infinite;
            /* 动画，animation 属性是一个简写属性，用于设置六个动画属性： */
            /* animation-name	规定需要绑定到选择器的 keyframe 名称。。
               animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
               animation-timing-function	规定动画的速度曲线。
               animation-delay	规定在动画开始之前的延迟。
               animation-iteration-count	规定动画应该播放的次数。
               animation-direction	规定是否应该轮流反向播放动画。 */
        }

        .box:hover {
            animation: photo 15s linear infinite paused;
        }

        .box img {
            width: 200px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
            /* 去掉定位，呈DNA螺旋状旋转 */
            border: 3px solid rgba(255, 255, 255, .5);
            /* transform-style: preserve-3d; */
            transition: all 1s;
        }

        .box a:nth-child(1) img {
            transform: translateZ(280px);
        }

        .box a:nth-child(2) img {
            transform: rotateY(40deg) translateZ(280px);
        }

        .box a:nth-child(3) img {
            transform: rotateY(80deg) translateZ(280px);
        }

        .box a:nth-child(4) img {
            transform: rotateY(120deg) translateZ(280px);
        }

        .box a:nth-child(5) img {
            transform: rotateY(160deg) translateZ(280px);
        }

        .box a:nth-child(6) img {
            transform: rotateY(200deg) translateZ(280px);
        }

        .box a:nth-child(7) img {
            transform: rotateY(240deg) translateZ(280px);
        }

        .box a:nth-child(8) img {
            transform: rotateY(280deg) translateZ(280px);
        }

        .box a:nth-child(9) img {
            transform: rotateY(320deg) translateZ(280px);
        }

        .box a:nth-child(1) img:hover {
            transform: translateZ(280px) scale(1.2);
        }

        .box a:nth-child(2) img:hover {
            transform: rotateY(40deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(3) img:hover {
            transform: rotateY(80deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(4) img:hover {
            transform: rotateY(120deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(5) img:hover {
            transform: rotateY(160deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(6) img:hover {
            transform: rotateY(200deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(7) img:hover {
            transform: rotateY(240deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(8) img:hover {
            transform: rotateY(280deg) translateZ(280px) scale(1.2);
        }

        .box a:nth-child(9) img:hover {
            transform: rotateY(320deg) translateZ(280px) scale(1.2);
        }

        body>.bg_box>:not(:target) {
            z-index: -4;
        }
        /* 让不是目标元素的层级设为-4，隐藏在底部 */

        @keyframes photo {
            0% {
                transform: rotateX(-10deg) rotateY(0deg);
                /* 控制初始位置 */
            }
            100% {
                transform: rotateX(-10deg) rotateY(360deg);
                /* 控制结束位置 */
            }
        }
    </style>
</head>

<body>
    <div class="bg_box">
        <img id="t1" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537970523&di=926d3ce43eb0146b036b1ca671a03221&src=http://img5q.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.jpeg"
        />
        <img id="t2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607796&di=b1e6406dd72dd25f1fc156d1936dff66&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201406%2F14%2F20140614141219_NUSwP.thumb.700_0.jpeg"
        />
        <img id="t3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607790&di=9ca0ab1b5252371ca7d5e655c713e16a&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201409%2F12%2F20140912133849_sB83y.thumb.700_0.jpeg"
        />
        <img id="t4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607789&di=e825ca6638d49aeac95693ca53982480&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fcb4882b9a186c9177f3e5337.jpg"
        />
        <img id="t5" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=eb9e2ddca46e441dc34e09f52f520659&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201505%2F10%2F20150510184422_sTNUF.jpeg"
        />
        <img id="t6" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=b7cea16fba8bcb84a9c38307c8c761a7&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8d5494eef01f3a293a7c99719f25bc315d607cdc.jpg"
        />
        <img id="t7" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
        />
        <img id="t8" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
        />
        <img id="t9" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
        />
    </div>
    <div class="content">
        <div class="box">
            <a href="#t1">
                <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537970523&di=926d3ce43eb0146b036b1ca671a03221&src=http://img5q.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.jpeg"
                    alt="" />
            </a>
            <a href="#t2">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607796&di=b1e6406dd72dd25f1fc156d1936dff66&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201406%2F14%2F20140614141219_NUSwP.thumb.700_0.jpeg"
                    alt="" />
            </a>
            <a href="#t3">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607790&di=9ca0ab1b5252371ca7d5e655c713e16a&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201409%2F12%2F20140912133849_sB83y.thumb.700_0.jpeg"
                    alt="" />
            </a>
            <a href="#t4">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607789&di=e825ca6638d49aeac95693ca53982480&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fcb4882b9a186c9177f3e5337.jpg"
                    alt="" />
            </a>
            <a href="#t5">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=eb9e2ddca46e441dc34e09f52f520659&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201505%2F10%2F20150510184422_sTNUF.jpeg"
                    alt="" />
            </a>
            <a href="#t6">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980607782&di=b7cea16fba8bcb84a9c38307c8c761a7&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8d5494eef01f3a293a7c99719f25bc315d607cdc.jpg"
                    alt="" />
            </a>
            <a href="#t7">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
                    alt="" />
            </a>
            <a href="#t8">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
                    alt="" />
            </a>
            <a href="#t9">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537980706177&di=909f0f014d5082e4ec7a440e2af5ace2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F12%2F20140612200835_WQSTT.thumb.700_0.jpeg"
                    alt="" />
            </a>
        </div>
    </div>
</body>

 

效果图：

想要飞翔的小猪
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-3D悬停相册动画
03-21
CSS-3D悬停相册
【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 1557
一、CSS3 3D 转换简介 1、3D 物体与 2D 物体区别 2、2D 平面坐标系 3、3D 空间坐标系 4、常用的 3D 转换属性 二、3D 位移转换 1、3D 位移转换语法 2、代码示例分析 三、代码示例
HTML+CSS+JS--3D相册
青竹雾色间.的博客
04-27 1667
​。
【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置 透视视图 效果 | 结构伪类选择器 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-29 1145
一、3D 呈现效果 - transform-style 属性 1、transform-style 属性语法 二、transform-style 属性示例 1、核心要点 设置 透视视图 效果 设置 父容器 3D 呈现效果 结构伪类选择器 2、代码示例
【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 5422
一、" 透视 " 概念简介 1、" 透视 " 概念引入 2、视距与成像关系 二、CSS3 中 " 透视 " 属性设置 1、" 透视 " 语法设置 2、代码示例 - " 透视 " 语法设置 添加了透视后的代码示例 执行结果
web前端入门——CSS3-3D技术详解及案例
L3gacy
04-06 1308
CSS3-3D技术 景深 生活中的3d 区别于2d的地方 1、近大远小 景深 程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显） perspective: 1200px;（在父元素中使用） transform:perspective(1200px) （在子元素中使用） 两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间...
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
Shids_的博客
02-07 5618
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
CSS+HTML 3D相册
04-10
基于css，jquery，html的3D旋转相册，炫酷实用，有效。
CSS实现的3D相册
02-04
效果连接： https://blog.csdn.net/qq_43625266/article/details/113575863
html+css+js 3D相册
04-20
html+css+js 3D相册
3d旋转相册—css3高级进阶
04-13
1.适合人群：有一定的编程经验。 2.需要有HTML基础知识以及CSS初中级知识，想要进阶CSS3高级的小伙伴，那么这个案例将对你有所帮助，涉及的动画知识点有扭曲、平移、旋转等。
css3 3D 转换 技巧详细解析与代码实例
猿码互联
10-24 1607
CSS3 3D转换是CSS3中的一项新特性，通过它我们可以比较容易地实现3D效果。在这里，我将向大家介绍CSS3 3D转换的一些基本概念、使用方法和常见技巧。
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
qq_45687086的博客
05-17 3680
各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。 本篇文章内容就是利用HTML简单的布局再加上CSS3的动画效果做出一个立体旋转的照片墙。效果如下图 ...
css3中的3d元素
m0_73737249的博客
10-07 300
css3部分的3d元素
css3 3D转换
HGYYR的博客
04-04 318
3D转换
3D旋转相册（附源码+素材）
weixin_45345143的博客
12-03 9002
3D立体选择相册制作，给你的女神最棒的效果，实现的过程都是用的win10电脑自带的软件实现的，可操作性强，无需额外安装软件。
【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-13 5307
一、3D 旋转 rotate3d 1、rotate3d 语法 2、rotate3d 自定义轴旋转 3、元素旋转方向 - 左手准则 二、代码示例 1、代码示例 2、执行结果
CSS3中2D和3D的使用
M_1236547的博客
08-24 70
那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；视点，用于模拟透视效果时人眼的位置。
CSS3 03-2D和3D的使用
dcwal的博客
08-24 66
1. 过渡(CSS3) transitio1. 过渡(CSS3) transitio手风琴案例2. 2D变形(CSS3) transformtransform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。transform 变换 变形的意思2.1 移动 translate(x, y)平移：2.2 缩放 scale(x, y) （0~1）
3d 相册 js css
05-14
同时，css也可用于3D相册的样式设计。使用适当的3D变换效果和过渡动画，可以打造出更加生动、立体的视觉效果。 除了js和css之外，另外一些技术如Canvas、WebGL等也可用于3D相册的开发。Canvas作为一种HTML5标准元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值