CSS3实现3D效果的图片墙
先来看一下效果：http://39.105.101.122/myhtml/CSS/transform_3D/img_3D.html
目前没有做IE的兼容，在谷歌浏览器里面可以看到效果
布局结构：
<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>
CSS3实现3D效果的图片墙的更多相关文章
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
- 使用Three.js网页引擎创建酷炫的3D效果的标签墙
使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...
- 3d效果的图片轮播
CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- CSS3之3D效果中的transform运用
css3中添加了很多新的标签 属性 描述 css transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的位置. 3 transform-s ...
- 「CSS3 」3D效果 & 透视
CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
随机推荐
- 提交docker镜像
docker commit -m="提交的描述信息" -a="作者" 容器id 目标镜像名:[TAG]
- 【过滤器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
简介 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern),是一种结构型模式.这种模式允许使用不同的标准条件来过滤一组对象,并通过逻辑运算的方式把各条件连接起来,它 ...
- vue之字符串的方法
目录 简介 indexOf方法 简介 本文会把遇到的字符串的方法慢慢补充进来 indexOf方法 indexOf方法判断字符串是否包含另一个字符串 判断结果如果包含返回的是索引,如果不包含,则返回-1 ...
- mongoDB操作指南
目录 1. docker安装mongoDB 2. 库-database 3. 集合-collection 3.1 命名规范 3.2 增-createCollection 3.3 删-drop 4. 文 ...
- MySQL（十二）索引使用的情况分析
索引使用的情况分析 数据准备 创建表student_info.course CREATE TABLE `student_info` ( `id` int NOT NULL AUTO_INCREMENT ...
- 如何确定 this 指向？改变 this 指向的方式有哪些？
this 指向: 1. 全局上下文(函数外) 无论是否为严格模式,均指向全局对象.注意:严格模式下全局对象为undifined 2. 函数上下文(函数内) 默认的,指向函数的调用对象,且是最直接的调用 ...
- Java学习笔记03
1. 流程控制语句 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.所以,我们必须清楚每条语句的执行流程.而且,很多时候要通过控制语句的执行顺序来实现我们想要的功能. 1.1 分 ...
- SpringBoot自动装配原理剖析（自己理解，有错请指出）
注解 主类 @SpringBootApplication @EnableAutoConfiguration @Import({AutoConfigurationImportSelector.class ...
- SqlServer 添加字段说明、表说明
1.添加表说明 EXECUTE sp_addextendedproperty N'MS_Description','表说明',N'user',N'dbo',N'table',N'表名',NULL,NU ...
- [图像处理]仿射变换(Affine Transformation)
文章目录 仿射变换(Affine Transformation) 平移变换 Translation 缩放变换(Scale) 剪切变换(Shear) 旋转变换(Rotation) 组合 仿射变换(Aff ...