3D立体旋转相册

最新推荐文章于 2022-09-08 20:39:39 发布

mushroom_er

最新推荐文章于 2022-09-08 20:39:39 发布

阅读量240

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_48642958/article/details/117752950

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/index.js"></script>
    <link rel="stylesheet" href="CSS/common.css">
    <style>
        html{
            /* 设置视距，即眼睛与屏幕里直观距离 */
            perspective: 1000px;
        }
        .photo{
            /* 设置容器的宽高 */
            width: 200px;
            height: 200px;
            /* 居中显示 */
            margin: 150px auto;
            /* 开启相对定位 */
            position: relative;
            /* 3d变形 */
            transform-style: preserve-3d;
            /* 旋转一定的角度 */
            transform: rotateX(45deg)  rotateZ(45deg);
            /* 开启动画 */
            animation: run 6s  infinite linear alternate;
            
            
        }
        /* 定义动画状态 */
        @keyframes run{
            /* 起始状态 */
            0%{
                /* 旋转角度 */
                transform:rotateY(45deg) rotateZ(45deg);
            }
            /* 终止状态 */
            100%{
                transform:rotateY(360deg) rotateZ(45deg);
            }
        }

        /* 鼠标移动到图片上时暂停 */
        .photo:hover{
            animation-play-state: paused;
        }
        .photo div{
            /* 设置每张图片容器的宽高 */
            width: 360px;
            height: 360px;
            /* 表示图片撑满盛放图片的容器 */
            background-size: cover;
            /* 开启绝对定位脱离文档流 */
            position: absolute;
            /* 设置图片透明度 */
            opacity: .9;
            
        }
        /* 替换图片只需替换下面的图片地址 */
        .p1{
            /* 背景图片的地址 */
            background-image: url(img/p1.jpg);
            /* 表示沿y轴旋转90度，沿z轴平移180个像素，下同 */
            transform:rotateY(90deg) translateZ(180px) ;
        }
        .p2{
            background-image: url(img/p2.jpg);
            transform:rotateY(-90deg) translateZ(180px) ;
        }
        .p3{
            background-image: url(img/p3.jpg);
            transform:rotateX(90deg) translateZ(180px);
        }
        .p4{
            background-image: url(img/p4.jpg);
            transform:rotateX(-90deg) translateZ(180px);
        }
        .p5{

            background-image: url(img/p5.jpg);
            transform:rotateY(180deg) translateZ(180px);
        }
        .p6{
            transform:rotateY(0deg) translateZ(180px);
            background-image: url(img/p6.jpg);
        }

    </style>

</head>

<body>
    <*这里引用外部文件*>
    <div id="web_bg" style="background-image: url(images/纯色.jpg); opacity: 1; " >
    <div class="photo">
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
        <div class="p4"></div>
        <div class="p5"></div>
        <div class="p6"></div> 
    </div>
</div>
</body>

</html>

调用的外部文件的部分：（这个是设置的背景图片的）

/* 背景图片适应屏幕大小，且不会随屏幕滚动而动 */
#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

调节透明度的时候出了一点点问题，它调的不是背景[手动笑哭]

mushroom_er

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D立体旋转相册

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫