立体轮播图

代码+界面呈现
HTML

<div class="pox"><ul class="box"><li class="one"><img src="./img/img1.jpg" alt=""></li><li class="two"><img src="./img/img2.jpg" alt=""></li><li class="three"><img src="./img/img3.jpg" alt=""></li><li class="four"><img src="./img/img4.jpg" alt=""></li><li class="five"><img src="./img/img5.jpg" alt=""></li><li class="six"><img src="./img/img6.jpg" alt=""></li></ul></div>

CSS

 body,html,div,ul,li {margin: 0;padding: 0;}.pox{position: relative;perspective: 1600px;border: 1px solid #000;margin: 0 auto;width: 300px;height: 300px;}.box {height: 300px;margin: 0 auto;position: relative;transform-style: preserve-3d;width: 300px;transition: 2s;}.box>li {width: 300px;height: 300px;list-style: none;text-align: center;line-height: 300px;font-size: 30px;position: absolute;}.box>li>img {width: 300px;height: 300px;}.one {background: rgba(255, 0, 5, 0.3);transform: translateZ(150px);}.two {background: rgba(220, 104, 44, 0.3);transform: rotateY(90deg) translateZ(150px);}.three {background: rgba(255, 239, 0, 0.3);transform: translateZ(-150px) rotate(180deg);}.four {background: rgba(86, 255, 0, 0.3);transform: rotateY(-90deg) translateZ(150px);}.five {background: rgba(0, 76, 255, 0.3);transform: rotateX(90deg) translateZ(150px);}.six {background: rgba(168, 0, 255, 0.3);transform: rotateX(-90deg) translateZ(150px);}

效果：如下图的一个正方体

调整为轮播图需要添加JS部分：效果每间隔3s中会轮播一次，为什么是3s因为正方体每次旋转的时间用去了2s

function scroll() {var time = 90;var num = 0;setInterval(function () {num++$('.box').css({ "transform": "rotateY(" + time*num + "deg)" })}, 5000)
}
scroll()

知识点：

布局：

1.外层标签.pox：第一个div（.pox）使用了perspective:1600px属性来实现景深,同时设置一个基准平面作为参照——观察者距离距离z=0平面的距离，如果正方体的面都是透明的，那么会有可透视的效果，如果z>0，元素看起来会比正常要偏大，反之则偏小
2.外层标签.box：第二个div（.box）保留3d效果，transform-style: preserve-3d
3.内层的6个li标签则分别是正方体的6个面，主要通过旋转和位移调整

关于translate()
需要注意的是该属性的X,Y,Z轴始终是针对元素当前的位置来说的，什么意思?例如：对于正对观察者的元素，垂直屏幕的轴就是Z轴，但是如果该元素围绕Y轴旋转了90deg之后，那么相对于该元素来讲，Z轴就变成平行屏幕的方向了。这点掌握了，就可以轻松写立体图形了

使用CSS写正方体，结合JS实现3D轮播图相关推荐

html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
1.Web前端之CSS3中3D立方体以及3D轮播图
1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动9 ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
微信小程序3D轮播图实现
好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
小程序实现3D轮播图效果
小程序通过swiper标签实现3D轮播图效果一.效果图二.代码块 1.html <view wx:if="{{slideList.length>0}}" class ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...

使用CSS写正方体，结合JS实现3D轮播图

立体轮播图

使用CSS写正方体，结合JS实现3D轮播图相关推荐

最新文章

热门文章