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

这篇具有很好参考价值的文章主要介绍了如何用css实现一个3D旋转照片墙。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.前言

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

  正文:

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

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

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

html如何让3d元素中间放一个图片,css,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到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕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照片墙的代码了,感兴趣的小伙伴可以试一试,后续我还会更新更多关于前端的有趣案例,关注不迷路!文章来源地址https://www.toymoban.com/news/detail-789532.html

到了这里,关于如何用css实现一个3D旋转照片墙的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html5和css3实现3d正方体旋转

    5.用动画keyframes让其旋转起来:

    2024年02月02日
    浏览(61)
  • 【前端领域】3D旋转超美相册(HTML+CSS)

    世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍    3D旋转相册 三、效果展示 四、详细介绍  五、编码实现 index.html style.css  img  六、获取源码 公众号获取源码  获取源码?私信?关注?点赞?收藏?         新的一年,我们

    2024年02月02日
    浏览(47)
  • 圣诞节教你如何用Html+JS+CSS绘制3D动画圣诞树

    上篇文章给大家提供了一个如何生成静态圣诞树的demo。但是那样还不够高级,如何高级起来,当然是3D立体带动画效果了。 先看效果图: 源码如下: 将源码复制保存到html中打开即可。源码都是些基本的知识,不过多讲解。

    2024年02月03日
    浏览(59)
  • 纯css实现奥运五环、3D平移、旋转、扭曲

    1、不是真正的五环,因为通过形变得来。 2、不同电脑显示器的像素不同,显现的效果不同。 3、不推荐使用此方法。 4、主要通过旋转加平移的方式实现。

    2024年02月10日
    浏览(42)
  • CSS3实现图片的3D旋转效果

    准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。 先看看效果:   代码如下:

    2024年02月12日
    浏览(50)
  • css3实现3D立方体旋转特效源码

    CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效 css3实现3D立方体旋转特效代码

    2024年04月09日
    浏览(49)
  • CSS实现鼠标跟随 3D 旋转效果,让交互活起来

    一淘模板(56admin.com)给大家介绍一下如何使用CSS实现有意思的鼠标跟随 3D 旋转效果,让交互更加生动,希望对大家有所帮助! 今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元

    2024年02月10日
    浏览(88)
  • 教你用 CSS 实现超真实的 3D 相册,让你的照片立体感 UPUP

    现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,通过 css3 实现 3d 效果的立方体相册,下面一起看看吧。 首先我们要确定好 html 的结构以及要使用的标签; 当我们搭建好 html 的结构后,就要想到怎

    2023年04月16日
    浏览(38)
  • JavaScript+canvas实现一个旋转的3D球动画效果

    1. 获取Canvas元素和设置初始参数 这部分代码主要是获取Canvas元素,并根据设备的DPI进行缩放。然后,定义了一些全局变量,包括Canvas的宽度、高度、球体旋转的角度和存储所有点的数组。 2. 定义一些常量 这部分代码定义了一些常量,如点的数量、点的半径、球半径等。 3.定

    2024年01月18日
    浏览(53)
  • HTML/CSS实现3D翻转页面效果

    下面是一个基本的例子,展示了如何使用CSS和HTML实现一个3D页面翻转效果: HTML部分: CSS部分: 在这个例子中,我们使用一个包含两个面(正面和背面)的容器div。通过CSS的 transform 属性和 rotateY 函数,我们实现了容器在鼠标悬停时的旋转效果。 你可以根据自己的需求调整容

    2024年01月24日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包