简单的3D旋转相册

最新推荐文章于 2024-06-20 13:35:38 发布

晓晓啊

最新推荐文章于 2024-06-20 13:35:38 发布

阅读量396

点赞数 1

分类专栏： html 文章标签： html css3

本文链接：https://blog.csdn.net/weixin_48007375/article/details/106545081

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

旋转相册
用html打一个简易的旋转相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d旋转相册</title>
    <style>
         body{
             margin: 0; /*外边距*/
             perspective: 1000px; /* 设置元素被查看位置的视图*/
             overflow: hidden;
         }
        .images{
            position: relative;
            width: 260px;
            height: 260px;
            /*border: 2px solid red;*/
            margin: 260px auto;
            transform-style: preserve-3d;
            animation: move 4s infinite/*无限*/ linear/*匀速*/;
            transform-origin: center center 130px;
        }
        p{
            position: absolute;
            top: 0;
            left: 0;
            width: 260px;
            height: 260px;
            border: 1px dashed black;
            margin: 0;
            transition: 1s; /*过度时间*/
        }
        .li6{
           transform: rotateX(-90deg);   /*旋转属性*/
            transform-origin: bottom;    /*相对于下面旋转*/
        }
         .li5{
             transform: rotateY(-90deg);
             transform-origin: left;
         }
         .li4{
             transform: rotateY(90deg);
             transform-origin: right;
         }
         .li3{
             transform: rotateX(90deg);
             transform-origin: top;
         }
         .li2{
             transform: translateZ(260px);
         }
         .li1{
             transform: rotateY(180deg);
         }
           @keyframes move {
                    0% {transform: rotateY(0deg)}
               100%{transform: rotateY(360deg)}

           }
        .images:hover .li6{
             transform: rotateX(-90deg) translateZ(150px);
             /*transform-origin: bottom;*/
         }
        .images:hover   .li5{
            transform: rotateY(-90deg) translateZ(150px);
        }
         .images:hover   .li4{
             transform: rotateY(90deg) translateZ(150px);
         }
         .images:hover   .li3{
             transform: rotateX(90deg) translateZ(150px);
         }
         .images:hover   .li2{
             transform: translateZ(260px) translateZ(150px);
         }
         .images:hover   .li1{
             transform: rotateY(180deg) translateZ(150px);
         }
    </style>
</head>
<body>
  <div class="images">
      <p class="li1"><img src="01.jpg" alt="" width="260" height="260"></p>
      <p class="li2"><img src="02.jpg" alt="" width="260" height="260"></p>
      <p class="li3"><img src="03.jpg" alt="" width="260" height="260"></p>
      <p class="li4"><img src="04.jpg" alt="" width="260" height="260"></p>
      <p class="li5"><img src="05.jpg" alt="" width="260" height="260"></p>
      <p class="li6"><img src="06.jpg" alt="" width="260" height="260" ></p>
  </div>
</body>
</html>

运行图片
在这里插入图片描述
新手小白，多多指教。

晓晓啊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的3D旋转相册

旋转相册用html打一个简易的旋转相册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3d旋转相册</title> <style> body{ margin: 0; /*外边距*/ perspective: 1000px; /* 设置元素
复制链接

扫一扫