如何用css实现一个3D旋转照片墙

发布于：2022-11-14 ⋅ 阅读:(731) ⋅ 点赞:(0)

一.前言

   学习前端是件很有趣的事，今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦，希望感兴趣的小伙伴会喜欢！

  正文：

   今天，我们要做一个3D旋转相册，首先让我们了解一下关于3D。

   3D立体其实就像数学中的x轴，y轴，z轴，在网页上设置z轴与y轴的偏移量，能给人们带来很强的视觉效果，其实是一种视觉假象，让人们看到的是3D效果。

  接下来看一下3D旋转照片墙的效果图

代码如下： 

  1.html：设置一个盒子装事先准备好的图片，可以给盒子设置好名字，方便以后设置样式

<div class="container">
    <div class="box">
      <div class="circle circle1">
        <img src="./img/QQ图片20221114190101.jpg" alt="">
      </div>
      <div class="circle circle2">
        <img src="./img/QQ图片20221114190057.jpg" alt="">
      </div>
      <div class="circle circle3">
        <img src="./img/QQ图片20221114190053.jpg" alt="">
      </div>
      <div class="circle circle4">
        <img src="./img/QQ图片20221114190048.jpg" alt="">
      </div>
      <div class="circle circle5">
        <img src="./img/QQ图片20221114190044.jpg" alt="">
      </div>
      <div class="circle circle6">
        <img src="./img/QQ图片20221114190038.jpg" alt="">
      </div>
      <div class="circle circle7">
        <img src="./img/QQ图片20221114190014.jpg" alt="">
      </div>
      <div class="circle circle8">
        <img src="./img/QQ图片20221114190008.jpg" alt="">
      </div>
      <div class="circle circle9">
        <img src="./img/QQ图片20221114190002.jpg" alt="">
      </div>
      <div class="circle circle10">
        <img src="./img/QQ图片20221114185953.jpg" alt="">
      </div>
    </div>
  </div>

2.修改默认样式，设置body的视口宽高，背景颜色。

   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 设置可视窗口的宽高 */
    body {
      width: 100vw;
      height: 100vh;
      position: relative;
      background-color: pink;
    }

3.设置内部样式，给盒子设置一个绝对定位，遵循子绝父相的原则，属性：
perspective
景深（近大远小），是观察物体的一个视角距离，距离越小效果越明显，它的数值一般为900px-1200px。
使用方法：
perspective：1200px；（在父元素中使用）
transform：perspective（1200px）；（在子元素中使用，但是我们一般不用这种方法）

  .container {
      position: absolute;
      width: 1000px;
      height: 500px;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

4.transform-style使用方法：transform-style：preserve-3d；（让当前元素形成一个3D空间）设置图片宽高，边框圆角。

 .box {
      width: 150px;
      height: 150px;
      position: relative;
      transform-style: preserve-3d;
      animation: run 10s linear infinite;
    }
    .circle {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
    }
 
    /*设置图像大小、边框、圆角、位置*/
    .circle img {
      width: 200px;
      height: 150px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;
    }

5.perspective-origin观察3D元素的角度（位置）使用方法：
perspective-origin： left top；
perspective-origin： center center；
perspective-origin： 50% 50%；
perspective-origin： 0px 0px；


功能函数：translate（）3D位移使用方法：
transform：translate3d（x,y,z）；
transform：translateX（）；（X轴上的位移）
transform：translateY（）；（Y轴上的位移）
transform：translateZ（）；（Z轴上的位移）
注意： z不能为百分比。

rotate（）3D旋转使用方法：
transform：rotate3d（x,y,z,a）；（建议取值0或1，0不旋转，1旋转）
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
transform：rotateX（）；（数值为度60deg为60度）
transform：rotateY（）；（数值为度60deg为60度）
transform：rotateZ（）；（数值为度60deg为60度）
scale（）3D缩放
使用方法：
transform：scale3d（x,y,z）；（缩放比例）
transform：scaleX（）；（X轴上的缩放）
transform：scaleY（）；（Y轴上的缩放）
transform：scaleZ（）；（Z轴上的缩放）
注意：
默认值为1，大于1为放大，小于1大于0为缩小；
单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

   .circle1 {
      transform: translateZ(500px);
    }
    .circle2 {
      transform: rotateY(36deg) translateZ(500px);
    }
    .circle3 {
      transform: rotateY(72deg) translateZ(500px);
    }
    .circle4 {
      transform: rotateY(108deg) translateZ(500px);
    }
    .circle5 {
      transform: rotateY(144deg) translateZ(500px);
    }
    .circle6 {
      transform: rotateY(180deg) translateZ(500px) ;
    }
    .circle7 {
      transform: rotateY(216deg) translateZ(500px);
    }
    .circle8 {
      transform: rotateY(252deg) translateZ(500px);
    }
    .circle9 {
      transform: rotateY(288deg) translateZ(500px);
    }
    .circle10 {
      transform: rotateY(324deg) translateZ(500px);
    }
    @keyframes run {
      0% {
        transform: rotateY(0);
      }
 
      100% {
        transform: rotateY(360deg);
      }
    }

以上是代码段分解跟知识点讲解：下面是完整代码敬上

<!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>动画2</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置可视窗口的宽高 */
        body {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-color: pink;
        }

        .container {
            position: absolute;
            width: 1000px;
            height: 500px;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }

        .box {
            width: 150px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            animation: run 10s linear infinite;
        }

        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }

        /*设置图像大小、边框、圆角、位置*/
        .circle img {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .circle1 {
            transform: translateZ(500px);
        }

        .circle2 {
            transform: rotateY(36deg) translateZ(500px);
        }

        .circle3 {
            transform: rotateY(72deg) translateZ(500px);
        }

        .circle4 {
            transform: rotateY(108deg) translateZ(500px);
        }

        .circle5 {
            transform: rotateY(144deg) translateZ(500px);
        }

        .circle6 {
            transform: rotateY(180deg) translateZ(500px);
        }

        .circle7 {
            transform: rotateY(216deg) translateZ(500px);
        }

        .circle8 {
            transform: rotateY(252deg) translateZ(500px);
        }

        .circle9 {
            transform: rotateY(288deg) translateZ(500px);
        }

        .circle10 {
            transform: rotateY(324deg) translateZ(500px);
        }

        @keyframes run {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }
    </style>

    <body>
        <div class="container">
            <div class="box">
                <div class="circle circle1">
                    <img src="./img/QQ图片20221114190101.jpg" alt="">
                </div>
                <div class="circle circle2">
                    <img src="./img/QQ图片20221114190057.jpg" alt="">
                </div>
                <div class="circle circle3">
                    <img src="./img/QQ图片20221114190053.jpg" alt="">
                </div>
                <div class="circle circle4">
                    <img src="./img/QQ图片20221114190048.jpg" alt="">
                </div>
                <div class="circle circle5">
                    <img src="./img/QQ图片20221114190044.jpg" alt="">
                </div>
                <div class="circle circle6">
                    <img src="./img/QQ图片20221114190038.jpg" alt="">
                </div>
                <div class="circle circle7">
                    <img src="./img/QQ图片20221114190014.jpg" alt="">
                </div>
                <div class="circle circle8">
                    <img src="./img/QQ图片20221114190008.jpg" alt="">
                </div>
                <div class="circle circle9">
                    <img src="./img/QQ图片20221114190002.jpg" alt="">
                </div>
                <div class="circle circle10">
                    <img src="./img/QQ图片20221114185953.jpg" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

下面是效果展示：

css实现3d旋转照片墙

以上就是实现3D照片墙的代码了，感兴趣的小伙伴可以试一试，后续我还会更新更多关于前端的有趣案例，关注不迷路！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布