集团网站设计开发,重置wordpress,wordpress 分类目录 不显示,四大软件外包公司通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果 HTML部分#xff1a; div id“banner”#xff1a;定义了一个id为banner的div标签#xff0c;作为图片轮播的容器。 ul: 在banner中定义了一个无序列表#xff0c;每个列表项… 通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果 HTML部分 div id“banner”定义了一个id为banner的div标签作为图片轮播的容器。 ul: 在banner中定义了一个无序列表每个列表项li包含一张图片这些图片将在页面上以3D旋转的方式展示。
CSS部分 #banner设置了banner的宽度、高度、边框、背景颜色等属性并设置了透视距离和观察者的位置这两个属性是实现3D效果的关键。 ul设置了无序列表的宽度、高度、位置等属性特别地设置了transform-style: preserve-3d;来保留3D转换效果transform-origin: center center -520px;来设置旋转的原点。 ulli设置了列表项的宽度、高度、位置等属性且每个列表项都被设定了固定的旋转角度使得它们在3D空间中呈现出环形排列。
JavaScript部分 使用了jQuery库和jQuery Transit插件。jQuery是一个快速、简洁的JavaScript库jQuery Transit是一个用于创建CSS3 transformations和transitions的jQuery插件。 setInterval(function(){…}, 2000);每2000毫秒即2秒执行一次匿名函数。在这个匿名函数中使用了jQuery Transit的transition()方法对 元素进行操作使其沿Y轴旋转60度达到了图片轮播的效果。 引入的js文件 jQuery.js https://jquery.com/jquery.transit.js https://github.com/rstacruz/jquery.transit
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{margin: 0;padding:0;list-style: none;}#banner{width:1000px;height: 500px;border: 1px solid red;margin: 0 auto;background:#000;perspective: 1000px; /*景深属性*/perspective-origin: top; /*观察着观看的位置*/}ul{width:600px;height:300px;margin: 100px 200px;position: relative;transform-style: preserve-3d;transform-origin: center center -520px;}ulli{width:600px;height:300px;position: absolute;left:0;top:0;background: #ccc;overflow: hidden;transform-origin: center center -520px;opacity: 0.8;}ulli:first-child{transform: rotateY(60deg);}ulli:nth-child(2){transform: rotateY(120deg);}ulli:nth-child(3){transform: rotateY(180deg);}ulli:nth-child(4){transform: rotateY(240deg);}ulli:nth-child(5){transform: rotateY(300deg);}ulli:nth-child(6){transform: rotateY(360deg);}ulliimg{width:600px;height:auto;}/style
/head
body
div idbannerulliimg srcimg/banner1.jpg alt/liliimg srcimg/banner2.jpg alt/liliimg srcimg/banner3.jpg alt/liliimg srcimg/banner4.jpg alt/liliimg srcimg/banner5.jpg alt/liliimg srcimg/banner6.jpg alt/li/ul
/div
script srcjs/jQuery.js/script
script srcjs/jquery.transit.js/script
scriptsetInterval(function(){$(ul).transition({rotateY:-60deg},linear);},2000);
/script
/body
/html
