切换风格

默认晚霞 雪山 粉色心情 伦敦 花卉 绿野仙踪 加州 白云 星空 薰衣草 城市 简约黑色 简约米色 龙珠
回复 0

3920

主题

3921

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
12975
3D相册[复制链接]
发表于 2022-5-23 15:33:44 | 显示全部楼层 |阅读模式
  

最近上课学HTML,刚好教了一个3D相册,可以用来表白,希望刀友门别嫌弃
以前图片被我删了..临时找了一个
需要自己改图片宽度高度,<!DOCTYPE html>

<html>

            <head>

                        <meta charset="utf-8">

                        <title>3D相册</title>

                        <style>

                                    *{

                                                margin: 0;

                                                padding: 0;

                                    }

                                    body,html{

                                                height: 100%;

                                    }

                                    body{

                                                background: url(lol/9f93200c4e48cf35f563765cea644ade.jpg) no-repeat center;

                                                background-size: 100%;

                                                /* 景深 */

                                                perspective: 2000px;

                                                overflow: hidden;

                                                

                                    }

                                    .box{

                                                width: 400px;

                                                height: 400px;

                                                

                                                background:    url(壁纸/4.jpg) no-repeat center;

                                                position: fixed;

                                                bottom: 0;

                                                top: 0;

                                                left: 0;

                                                right: 0;

                                                margin: auto;

                                                transform-style: preserve-3d;

                                                animation: img_rotate 20s linear infinite;

                                    }

                                    @keyframes img_rotate{

                                                0%{

                                                            transform: rotateX(0) rotateY(0);

                                                }

                                                25%{

                                                            transform: rotateX(10deg) rotateY(90deg);

                                                }

                                                50%{

                                                            transform: rotateX(0) rotateY(180deg);

                                                }

                                                75%{

                                                            transform: rotateX(-10deg) rotateY(270deg);

                                                }

                                                100%{

                                                            transform: rotateX(0) rotateY(360deg);

                                                }

                                    }

                                    .box .imgBox{

                                                width: 400px;

                          height: 400px;

                                                position: absolute;

                                                /* 定义变形原点为-600px 等下要让每一个盒子进行Z轴600的位移 */

                                                transform-origin: center center -600px;

                                                

                                    }

                                    .box .imgBox img{

                                                display: block;

                                                width: 100%;

                                                height: 100%;

                                    }

                                    .imgBox1{

                                                transform: translateZ(600px);

                                    }

                                    .imgBox2{

                                                transform: translateZ(600px) rotateY(36deg);

                                    }

                                    .imgBox3{

                                                transform: translateZ(600px) rotateY(72deg);

                                    }

                                    .imgBox4{

                                                transform: translateZ(600px) rotateY(108deg);

                                    }

                                    .imgBox5{

                                                transform: translateZ(600px) rotateY(144deg);

                                    }

                                    .imgBox6{

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

                                    }

                                    .imgBox7{

                                                transform: translateZ(600px) rotateY(216deg);

                                    }

                                    .imgBox8{

                                                transform: translateZ(600px) rotateY(252deg);

                                    }

                                    .imgBox9{

                                                transform: translateZ(600px) rotateY(288deg);

                                    }

                                    .imgBox10{

                                                transform: translateZ(600px) rotateY(324deg);

                                    }

                        </style>

            </head>

            <body>

                        <div class="box">

                                    <div class="imgBox imgBox1">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox2">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox3">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox4">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox5">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox6">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox7">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox8">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox9">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                                    <div class="imgBox imgBox10">

                                                <img src="壁纸/4.jpg" >

                                    </div>

                        </div>

                        

            </body>

</html>


复制代码
153344wwlomrelve64mtpr.jpg

相关帖子

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|不懂 ( 粤ICP备14042591号-1 )|网站地图

GMT+8, 2024-11-2 08:33 , Processed in 0.105767 second(s), 30 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

返回顶部