CSS3的3d变换

CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。

但是,为了让元素拥有3d变换的功能,我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在新版的Chrome中已不需要添加私有前缀,不过为了兼容之前版本的浏览器,建议还是加上私有前缀(本例中并未添加私有前缀)。

perspective属性取值为:none|number。当值为数字时,意味着该元素与我们眼睛之间的距离为该值。该属性定义在需要3d变换的元素的父元素上,声明该属性意味着定义了一个3d空间,值越小,3d效果越明显。其实可以有种方法更易理解,3d变换坐标系的Z轴我们可以类比为z-index定义的层叠上下文,而perspective取值就为眼睛与该层之间的距离。

可以借用一张图来阐述:

d值为设置的perspective属性,z值为元素所在Z轴距离屏幕的长度,上图为z值为正值,下图的z值为负值。

对于transform-style属性的取值有两种,分别为flat和preserve-3d。flat意味不存在3d空间,在Z平面上的变换会平展到x-y面上来,没有3d效果。preserve-3d则将该元素的所有子元素放入3d空间中,执行3d变换。

综上来看,transform-style可以为子元素创建3d空间,perspective可以设置视距(透视视深),而且该值只对第一个子元素有效。这两个属性可以结合使用,transform-style可以延续设置的视深,供其子元素使用。

实现3d轮播

轮播的实现并不难,在这里只是将2d转换为3d效果。为了实现要求,我们需要对图片呈现区域进行分片,每个分片执行不同的3d操作,造成很炫的视觉效果。

        body{margin:;padding:;overflow: hidden;}
.wrap{width: 560px;margin:30px auto;border: 10px solid #000000;}
.win{position: relative;perspective:none;}
.segment{transform-style: preserve-3d;}
.segment p{margin:;padding:;position:absolute;width:140px;height:100px;background: url(img/0.jpg)}
.container{height: 300px;}
.shadow{height:100%;width:100%;position: absolute;left:;top:;box-shadow: inset 0 0 40px;}
.tools{margin:;padding:;list-style: none;position: absolute;right:30px;bottom: 20px;}
.tools li{float: left;margin-right:20px;}
.btn>a:nth-child(1){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 0 no-repeat;position: absolute;left:10px;top:135px;}
.btn>a:nth-child(2){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 -45px no-repeat;position: absolute;right:10px;top:135px;}
.win .fly p{opacity:;}
.win .fly p:nth-child(1){transform: rotateX(30deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(2){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(3){transform: rotateX(3450deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(4){transform: rotateX(-30deg) rotateY(-10deg) translateZ(500px);}
.win .fly p:nth-child(5){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(6){transform: rotateX(40deg) rotateY(20deg) translateZ(500px);}
.win .fly p:nth-child(7){transform: rotateX(340deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(8){transform: rotateX(3450deg) rotateY(60deg) translateZ(500px);}
.win .fly p:nth-child(9){transform: rotateX(230deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(10){transform: rotateX(20deg) rotateY(20deg) translateZ(500px);}
.win .fly p:nth-child(11){transform:rotateX(30deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(12){transform: rotateX(10deg) rotateY(15deg) translateZ(500px);}
.tools .current{background: url(./img/icons.png) -8px -125px no-repeat;}
.tools li{background: url(./img/icons.png) -23px -125px;width: 15px;height: 15px;}
    <div class="wrap">
<div class="win">
<div class="segment">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="container">
<img id="pic" src="./img/0.jpg">
</div>
<div class="shadow"></div>
<div class="btn">
<a id="left" href="javascript:void 0"></a>
<a id="right" href="javascript:void 0"></a>
</div>
<ul class="tools">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
     $(function(){
var ps = $("p",".segment"), p, c,m;
var pic = $("#pic"),left = $("#left"),
right = $("#right");
var counter = 0;
var lis = $(".tools li");
// 将图片区域分成12个片段
function slice(){
for(var i=0;i<12;i++){
c = Math.floor(i / 4);
m = i % 4;
p = $(ps[i]);
p.css({
left: m*140+"px",
top: c*100+"px"
});
p.css("background-position",-m*140+"px "+ (-c*100)+"px");
}
}
slice();
// 设置渐进和背景图片
function coo(){
$(".segment").addClass("fly");
$(".segment p").css("transition","all 1s ease 0s");
pic.attr("src","./img/"+counter+".jpg");
setTimeout(function(){
$(".segment p").css({
"transition":"none",
"background-image": "url(img/"+counter+".jpg)"
});
$(".segment").removeClass("fly");
},1000) }
left.click(function(e){
if(counter == 0){
counter = 4;
}else{
counter--;
}
coo();
$.each(lis,function(li){
$(lis[li]).removeClass("current");
});
$(lis[counter]).addClass("current");
});
right.click(function(){
if(counter == 4){
counter = 0;
}else{
counter++;
}
coo();
$.each(lis,function(li){
$(lis[li]).removeClass("current");
});
$(lis[counter]).addClass("current");
})
})

3d效果的图片轮播的更多相关文章

  1. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. css3爆炸效果更换图片轮播图

    思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个sp ...

  4. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  5. JQ 实现轮播图(3D旋转图片轮播效果)

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  6. 实现一个图片轮播-3d播放效果

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  7. css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  8. WPF3D图片轮播效果

    原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...

  9. 实现一个3D图片轮播插件 —— 更新版

    前言:     前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...

随机推荐

  1. bootstrap按钮样式

    <a class='btn' href='javascript:;'>常规按钮</a> <a class='btn btn-small' href='javascript ...

  2. java-JDBC登录注册代码

    登录: public static void main(String[] args) throws Exception{ Scanner sc = new Scanner(System.in); Sy ...

  3. python方法中的self

    前几天在写一个c作业时,突发奇想,在结构体中加入函数指针, 像这样: struct People { int _age; int (*age)(); }people; 这样调用时就可以 people. ...

  4. java并发编程(十九)障碍器CyclicBarrier

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17512983 CyclicBarrier(又叫障碍器)同样是Java 5中加入的新特性,使 ...

  5. 正确获取访问者ip

    使用$_SERVER['REMOTE_ADDR']获取访问者ip具有局限性.比如访问者系统位于docker环境时,$_SERVER['REMOTE_ADDR']获取到的ip为虚拟ip,而不是我们真正需 ...

  6. Des与3Des加密解密

    /// <summary> /// Des和3Des算法 /// </summary> public class Des { /// <summary> /// D ...

  7. nginx-(/etc/init.d/nginx)启动脚本

    #!/bin/bash #nx Startup script for the Nginx HTTP Server # it is v. version. # chkconfig: - # descri ...

  8. .NET面试题系列[15] - LINQ:性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  9. 让你的站点也支持MarkDown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  10. 招聘.NET开发人员(截止于2015-06-15)

    文章更新 2015-06-15 01:00AM: 感谢各位的支持,简历和解决方案接收截止.2015-06-08 08:30AM: 已经收到一些简历和解决方案,正在筛选中.职位仍然开放,欢迎发送简历及解 ...