网站LOGO
千鹤喵绫
页面加载中
12月2日
网站LOGO 千鹤喵绫
做分享的事,总有意义的
菜单
  • 千鹤喵绫
    做分享的事,总有意义的
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    【教程】3d立方体相册-莎拉·达·奥丁
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    【教程】3d立方体相册-莎拉·达·奥丁

    千鹤喵绫 · 原创 ·
    程序员专区 · 暂无标签
    共 3913 字 · 约 1 分钟 · 290

    本次用莎拉·达·奥丁(サラ・ダ・オディン)

    分享的代码如下
    index.html

    html 代码:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>3d立方体相册-莎拉·达·奥丁</title>
    <script src="https://www.xnijika.com/pic/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div class="waibu">
        <div class="neibu">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
    
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    
    </body>
    </html>
    

    style.css

    css 代码:
    
    @keyframes xuanz {
        0% {
        transform:rotateY(0deg) rotatex(15deg);
    }
    100% {
        transform:rotateY(360deg) rotatex(15deg);
    }
    }.waibu {
        perspective:800px;
    }
    .neibu {
        transform-style:preserve-3d;
        position:relative;
        width:200px;
        height:200px;
        margin:400px auto;
        animation:xuanz 10s infinite linear;
    }
    .neibu div {
        width:200px;
        height:200px;
        position:absolute;
        left:0;
        top:0;
    }
    .neibu div:nth-child(1) {
        transform:translatez(-100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(2) {
        transform:rotateY(90deg) translatez(-100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(3) {
        transform:rotateY(90deg) translatez(100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(4) {
        transform:rotatex(-90deg) translatez(100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(5) {
        transform:rotatex(-90deg) translatez(-100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(6) {
        transform:translatez(100px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -10PX /cover;
    }
    .neibu div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) {
        width:300px;
        height:300px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-150px;
        margin-top:-150px;
        opacity:0.3;
        transition:transform 1s;
    }
    .neibu div:nth-child(7) {
        transform:translatez(-150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(8) {
        transform:rotateY(90deg) translatez(-150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(9) {
        transform:rotateY(90deg) translatez(150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(10) {
        transform:rotatex(-90deg) translatez(150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(11) {
        transform:rotatex(-90deg) translatez(-150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -50PX /cover;
    }
    .neibu div:nth-child(12) {
        transform:translatez(150px);
        background:url(https://img.xnijika.com/file/cc7ce80f18ed77fe5df93.jpg) 0 -10PX /cover;
    }
    body:hover div:nth-child(7) {
        transform:translatez(-300px) scale(1.2);
        opacity:0.8;
    }
    .waibu:hover div:nth-child(8) {
        transform:rotateY(90deg) translatez(-300px) scale(1.2);
        opacity:0.8;
    }
    .waibu:hover div:nth-child(9) {
        transform:rotateY(90deg) translatez(300px) scale(1.2);
        opacity:0.8;
    }
    .waibu:hover div:nth-child(10) {
        transform:rotatex(-90deg) translatez(300px) scale(1.2);
        opacity:0.8;
    }
    .waibu:hover div:nth-child(11) {
        transform:rotatex(-90deg) translatez(-300px) scale(1.2);
        opacity:0.8;
    }
    .waibu:hover div:nth-child(12) {
        transform:translatez(300px) scale(1.2);
        opacity:0.8;
    }
    声明:本文由 千鹤喵绫(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 千鹤喵绫 做分享的事,总有意义的
    MOEICP 萌ICP备20240860号 ICP 粤ICP证XXXXX号 又拍云 本站由又拍云提供CDN加速/云存储服务

    💻️ 千鹤喵绫 11月19日 在线

    🕛

    本站已运行 1 年 30 天 18 小时 43 分
    千鹤喵绫. © 2023 ~ 2024.
    网站logo

    千鹤喵绫 做分享的事,总有意义的