3D 立体感 轮播图 翻转效果，更好的视觉效果

最新推荐文章于 2021-07-27 16:43:28 发布
最新推荐文章于 2021-07-27 16:43:28 发布
阅读量2.6k 收藏 12
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panhuanqin/article/details/83055546
版权 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   .box{
      position: relative;
      width: 100%;
      height:500px;  
       transform-style: preserve-3d;
       perspective:800px;

   }
   li{
          width: 300px;
          height: 200px;
          position: absolute;
          left:50%;
       top:50%;
       margin-left:-150px;
       margin-top:-100px;
       list-style: none;
       border-radius: 5px;
      transition: 1s;
      overflow: hidden;
   }
   img{
      width: 100%;
      height: 100%;
   }
   </style>
</head>
<body>
   <ul class="box">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
      <li><img src="img/7.jpg" alt=""></li>
   </ul>
   <script>
      var li=document.getElementsByTagName("li");
      var iNow=3;
    var iTaget = 0;
         fn(iNow);
     function fn(n){
       for (let i = 1; i < 4; i++) {
          var left=n-i;
          if (left<0) {
             left=left+7;
          }
          li[left].style.transform=`translateX(${-150*(i)}px) translateZ(${300-i*100}px) rotateY(30deg)`
          var right=n+i;
             if (right>6) {
                 right=right-7
             }
          li[right].style.transform=`translateX(${150*(i)}px) translateZ(${300-i*100}px) rotateY(-30deg)`
       }
       li[n].style.transform="translateZ(300px)"
     } 
     var middle=0;
     for (var i = 0; i < li.length; i++) {
      li[i].index=i;
      li[i].οnclick=function(ev){
             middle=document.documentElement.clientWidth/2;
             num=ev.clientX;
             iTaget=this.index;
             if (middle<=num) {
               goleft()
              }else{
               goright()  
              }   
      }
     }
      function goleft(){
        if (iNow==iTaget) {
          return     
        }
        iNow++;
        if (iNow>6) {
          iNow=0;
        }
        fn(iNow);
        setTimeout(function(){
          goleft()
        },700)  
      }
      function goright(){
      if (iNow==iTaget) {
        return     
      }
      iNow--;
      if (iNow<0) {
          iNow=6;
        }
      fn(iNow);
      setTimeout(function(){
        goright()
      },700)  
    }
   </script>
</body>
</html>
笔临
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
3D立体效果轮播图
qq_39035580的博客
06-17 3364
今天我们来下一个写一个3D轮播图 先看一下效果：
css轮播图_css实现三面立体旋转无限轮播图动画（代码示例）
weixin_39726971的博客
11-29 408
本篇文章给大家介绍css实现三面立体旋转无限轮播图动画（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在之前的文章里介绍横向播放的无限轮播图动画（如下图），本文我们将在之前的基础上进行修改，实现不一样的轮播图动画。web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com​三面立体旋...
JQuery立体3D轮播图源码
06-10
使用JQuery实现网页轮播效果 有自动轮转 计算左右的距离 for(var i=0;iimgLen-1){ rNum-=imgLen; } $('img').eq(rNum).css({ transform:'translateX('+(150*(i+1))+'px) translateZ('+(100-i*100)+'px)' }) } // 中间图片位置 $('img').eq(indexId).css({ transform: 'translateZ(200px)' }) List();
前端基础学习之h5c3--3D切割轮播图（立体布局、transform）
no pains,no gains
11-25 859
常见的轮播图通常是整张图切换，在每个li中放入想要的image。
JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）
uffgfbft的博客
10-31 2610
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&a
纯CSS+HTML实现3D立方体轮播图
清砾的博客
09-14 2231
1.实现点击左右按钮，点击图片下方圆点都可以使立方体旋转到对应面，实现了不同图片的展示 2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使用，transform-style: preserve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);， 效果如图： 代码如下： <!DOCTYPE html> <html> <head> <meta cha
3D折页效果立体焦点图代码.zip
07-11
这种效果通过JavaScript（JS）编程语言实现，结合CSS3技术，使得静态的图片能够呈现出动态的3D翻转效果，形成一种立体的视觉体验。 首先，我们要理解3D折页效果的核心原理。这主要依赖于CSS3的transform属性，它...
jquery 3d旋转轮播图效果
12-10
在这个3D旋转轮播图中，CSS3的rotateY()函数被用来创建3D旋转效果，当用户点击或滑动时，图片会沿着Y轴旋转，呈现出立体的翻转感。 项目中的文件结构如下： 1. **index.html**：这是项目的主HTML文件，包含了轮播...
Roundabout.js演示6种图片立体旋转效果
11-03
Roundabout.js是一个强大的JavaScript库，专为创建动态、立体感的图片轮播效果而设计。这个库利用CSS3的转换和动画特性，为网页设计师提供了六种独特的图片旋转效果，使得网页中的图片展示不再单调，提升用户体验。 ...
3D切换效果jQuery焦点图.zip
11-16
"3D切换效果jQuery焦点图.zip"这个压缩包文件，就是针对这一需求，提供了一种利用JavaScript库jQuery实现的具有3D视觉效果的焦点图解决方案。本文将深入探讨这一技术的实现原理和相关知识点。 首先，jQuery作为一款...
JS 实现3D立体效果的首页轮播图
01-03
JS 实现3D立体效果的首页轮播图：http://blog.csdn.net/libin_1/article/details/50451121
多种轮播图和图片翻转效果.zip
09-09
压缩包里包含jquery多种方式图片轮播，一种上下轮播图、三种左右轮播图、还有一个图片翻转效果页面，部分轮播图带有手滑轮播效果
jQuery html5 css3图片立体排列3D旋转切换轮播
11-04
基于HTML5和jQuery的精美3D相册，让你的相片富有立体的播放效果 效果详情查看http://www.xwcms.net/webAnnexImages/fileAnnex/20130917/27077/index.html
HTML实现3D轮播图
09-30
HTML实现3D轮播图,即拿即用，非常好用，有空可以欣赏一下
jQuery轮播图
12-24
jQuery实现轮播图效果，适合初学者学习轮播图效果。。
3D立体手机触屏图片切换代码
04-07
在移动设备上，为了提供更好的用户体验，3D立体手机触屏图片切换代码是一种常见的交互设计。这种技术利用了HTML5、CSS3以及JavaScript库，尤其是jQuery，来创建出具有视觉吸引力和流畅操作感的3D图像展示效果。在这...
35个立体动感的视差滚动效果网站作品
weixin_34162695的博客
05-16 102
　　这篇文章收集了35个具有立体动感效果的视差滚动网页设计作品分享给大家。视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术，一起欣赏（拖动滚动条方式浏览效果佳）。 Saucony Kinvara 3 Atlantis Unfold Q Music ...
多视角立体视觉简介
如果想成为中心，那么就到中心去吧。
07-27 2067
文章目录摘要简介收集图像摄像机投影模型来自运动中的结构光束法平差多视角立体视觉 摘要 本文介绍了多视图立体视觉的动手视图，重点介绍了实际算法。多视图立体视觉算法能够仅从图像中构建高度详细的三维模型。他们拍摄了一组可能非常大的图像，并构建了一个三维合理的几何图形，在一些合理的假设下解释了图像，最重要的是场景刚性。本教程将多视图立体视觉问题框架为一个图像/几何一致性优化问题。它详细描述了它的主要两个成分：光度一致性措施的鲁棒实现，和有效的优化算法。然后，它介绍了这些主要成分如何被一些最成功的算法使用，应用到实际
css实现三面立体旋转无限轮播图动画（代码示例）
lin123_00的博客
04-29 1906
本篇文章给大家介绍css实现三面立体旋转无限轮播图动画（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以问我，随时给大家解答。再次感谢大家。 在之前的...
vue实现图片翻转效果
最新发布
05-20
实现图片翻转效果可以使用Vue的动画特性和CSS3的3D变换效果。下面是一个简单的例子，你可以根据自己的需求进行修改和扩展。 首先，我们需要在Vue组件中定义两个状态：正面和反面，并且使用`v-bind:class`来动态绑定组件的类名。然后，我们可以使用Vue的`transition`组件来定义动画的效果，如下所示： ```html <template> <div class="flip-container" @click="isFlipped = !isFlipped"> <div class="flipper" :class="{ flipped: isFlipped }"> <div class="front"> <img src="image.jpg"> </div> <div class="back"> <img src="image-flipped.jpg"> </div> </div> </div> </template> <script> export default { data() { return { isFlipped: false } } } </script> <style> .flip-container { perspective: 1000px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .back { transform: rotateY(180deg); } .flipped { transform: rotateY(180deg); } </style> ``` 在上面的代码中，我们使用了CSS3的`perspective`属性来指定3D场景的观察距离，使得图片看起来更加逼真。然后，我们定义了两个状态：正面和反面，并且使用`v-bind:class`来动态绑定组件的类名。最后，我们使用了`transition`组件来定义动画的效果，并且使用`transform`属性来实现3D翻转效果。 你可以根据自己的需求修改和扩展上面的代码，来实现更加复杂的图片翻转效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值