CSS3实现3D效果的图片墙

先来看一下效果:http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html

布局结构:

<div class="container">
        <img src="../Img/1.jpg">
        <img src="../Img/2.jpg">
        <img src="../Img/3.jpg">
        <img src="../Img/4.jpg">
        <img src="../Img/5.jpg">
        <img src="../Img/6.jpg">
        <img src="../Img/7.jpg">
        <img src="../Img/8.jpg">
        <img src="../Img/9.jpg">
        <img src="../Img/10.jpg">
    </div>

CSS3中新增了translate-style和perspective属性,要让图片有3D的效果就要添加这两个属性,具体的解释这里不再赘述,可以看这篇文章来理解:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

给container添加translate-style为preserve-3d,添加perspective: 2000px;

这里一共10张图片,为了让10张图片围成一个圆,需要添加position属性为absolute,设置宽度相同,居中,这时所有图片都重合在了一起。每张图片绕Y轴旋转36*i(i:0->9)度(rotateY),然后每张图片在Z轴方向移动相同的距离(translateZ),这个距离能保证图片不重合在一起就行。这时图片就围成了一个环状,并且是有3D效果的。然后给container添加动画属性让其绕Y轴不停旋转(rotateY),这时动画就出现了。

注意:给图片添加的属性transform: rotateY(0deg) translateZ(350px);rotateY和translateZ的位置不能交换,因为先旋转后移动和先移动后旋转的效果是不一样的。

这里我给container添加了背景颜色来参考图片的相对位置和旋转轴。

如果要用鼠标点击来切换图片的话,只需要每次点击之后container的旋转角度加36度就可以。

贴上代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>img_3D</title>
 6 </head>
 7 <style type="text/css">
 8     @keyframes an1{
 9         0%{
10             transform: rotateY(0deg)  ;
11         }
12         50%{
13             transform: rotateY(180deg)  ;
14         }
15         100%{
16             transform: rotateY(360deg) ;
17         }
18     }
19     .container{
20         width: 900px;
21         height: 400px;
22         background: rgba(255,0,0,0.5);
23         /*opacity: 0.3;*/
24
25         margin: 200px auto;
26         perspective: 2000px;
27         transform-style: preserve-3d;
28         animation: an1 10s linear 0s infinite;
29     }
30     .container img{
31         width: 200px;
32         height: auto;
33         margin: auto;
34         top: 0;
35         bottom: 0;
36         left: 0;
37         right: 0;
38         position: absolute;
39     }
40     .container img:nth-child(1){
41         transform: rotateY(0deg) translateZ(350px);
42     }
43     .container img:nth-child(2){
44         transform: rotateY(36deg) translateZ(350px);
45     }
46     .container img:nth-child(3){
47         transform: rotateY(72deg) translateZ(350px);
48     }
49     .container img:nth-child(4){
50         transform: rotateY(108deg) translateZ(350px);
51     }
52     .container img:nth-child(5){
53         transform: rotateY(144deg) translateZ(350px);
54     }
55     .container img:nth-child(6){
56         transform: rotateY(180deg) translateZ(350px);
57     }
58     .container img:nth-child(7){
59         transform: rotateY(216deg) translateZ(350px);
60     }
61     .container img:nth-child(8){
62         transform: rotateY(252deg) translateZ(350px);
63     }
64     .container img:nth-child(9){
65         transform: rotateY(288deg) translateZ(350px);
66     }
67     .container img:nth-child(10){
68         transform: rotateY(324deg) translateZ(350px);
69     }
70 </style>
71 <body>
72     <div class="container">
73         <img src="../Img/1.jpg">
74         <img src="../Img/2.jpg">
75         <img src="../Img/3.jpg">
76         <img src="../Img/4.jpg">
77         <img src="../Img/5.jpg">
78         <img src="../Img/6.jpg">
79         <img src="../Img/7.jpg">
80         <img src="../Img/8.jpg">
81         <img src="../Img/9.jpg">
82         <img src="../Img/10.jpg">
83     </div>
84 </body>
85 </html>
时间: 2024-10-12 12:37:43

CSS3实现3D效果的图片墙的相关文章

CSS3 文本3D效果

代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: 200px; text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba

3d效果的图片轮播

CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的父元素设置相应的变换属性.与其相关的属性为perspective和transform-style.在新版的Chrome中已不需要添加私有前缀,不过为了兼容之前版本的浏览器,建议还是加上私有前缀(本例中并未添加私有前缀). perspective属性取值为:none|number.当值为数字时,意味着

CSS3打造3D效果——perspective transform的深度剖析

声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了半天没看出任何效果,于是开始百度... ... 度了半天发现perspective这玩意是做3D效果的,但为甚我做demo楞没看出perspective加上去有任何3D.拜读过 张鑫旭 的博文后才了解perspective是透视(学美术,建筑的肯定懂,不懂得我也解释的不专业,个人理解为景深).既然p

Image Wall - jQuery &amp; CSS3 图片墙效果

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示     下载源码 您可能感兴趣的相关文章 充满想象力的 JavaScript 物理和重力实验 精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效

使用CSS3实现3D图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像.若浏览器不支持3D变换,一个简单的滑块将作为后备方案.要调用这个插件,首先把图片放在无序列表中

图片墙动画效果

CSS3 transition实现超酷图片墙动画效果 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 transform初体验之demo5</title> <style type="text/css">

CSS3学习(圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等)

matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角 两个值:第一个值为左上角与右下角,第二个值为右上角与左下角 一个值:四个圆角值相同 2.图片 border-image:有了CSS3的border-image属性,你可以使用图像创建一个边框:border-image属性允许你指定一个图片作为边框! 用于创建上

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

jQuery 3D 女神图片墙 可旋转播放

详细内容请点击 还记得之前分享过一款HTML5 3D立体图片相册,相册中的美女图片非常有特色.今天我们又要来分享一款可旋转播放的jQuery 3D女神图片墙,和一般的图片播放器不同的是,这款图片播放器是3D环形的,图片展示也将随着环形来回切换,效果非常不错.  在线演示源码下载 学习来源:http://www.html5tricks.com/jquery-3d-girl-image-player.html 更多html5内容请点击