HTML的3D转换《个人相册》制作

最新推荐文章于 2024-07-25 11:52:08 发布

智慧女孩不秃头&

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量240

点赞数

文章标签： html css js

本文链接：https://blog.csdn.net/qq_45284063/article/details/117805274

版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跳转页面</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        #container{
            width: 300px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); 
            animation: run 10s linear infinite;  
            transform-style: preserve-3d;
        }
        #box{
            width:100%;
            height: 30px;
            line-height: 25px;
            color: white;
            background: rgb(73, 72, 72);
            position:absolute;
            left:0px;
        }
        @keyframes run{
            0%{
                transform: translate(-50%,-50%) rotateY(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateY(360deg);
            }
        }
        #information{
            float: right;
        }
        #text{
            text-decoration:none;
            line-height: 30px;
            color: white;
        }
        img{
            width: 300px;
            position: absolute; 
            backface-visibility: visible;
            /* 默认值为visible，即能看见3d画面的背面，hidden看不见 */
        }
        #img1{
            transform: rotateY(60deg) translatez(600px);
        }
        #img2{
            transform: rotateY(120deg) translatez(600px);
        }
        #img3{
            transform: rotateY(180deg) translatez(600px);
        }
        #img4{
            transform: rotateY(240deg) translatez(600px);
        }
        #img5{
            transform: rotateY(300deg) translatez(600px);
        }
        #img6{
            transform: rotateY(360deg) translatez(600px);
        }
    </style>
</head>
<body background="1.jpeg" style="background-repeat: no-repeat;margin-left: 10px;">
<div>
    <div id="box">
    欢迎默默登录！
        <nav id="information">
            <a href="#" id="text">个人信息</a>
            <a href="登录页面.html" id="text">退出</a>
        </nav>
    </div>
    <div id="container">
        <img id="img1" src="3.jpg" alt="">
        <img id="img2" src="4.jpg" alt="">
        <img id="img3" src="5.jpg" alt="">
        <img id="img4" src="6.jpg" alt="">
        <img id="img5" src="7.jpg" alt="">
        <img id="img6" src="8.jpg" alt="">
        
    </div>
</div>
    
</body>
</html>

智慧女孩不秃头&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML的3D转换《个人相册》制作

3D转换1、要点：3D位移：translate3d(x, y, z)3D旋转：rotate3d(x, y, z)透视：perspctive3D呈现transfrom-style2、3D移动translate3d3D移动就是在2D移动的基础上多加了一个可以移动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上移动transform: translateY(100px)：仅仅是在 y 轴上移动transform: translateZ..
复制链接

扫一扫