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空间, ...
随机推荐
- 【CTF】关于 .init .fini .init_array .fini_array 日志 2019.7.16 pwn
查找资料的高效性 retn 返回到栈顶地址 关于 .init .fini .init_array .fini_array 其中存放着的是在main函数执行前执行的代码,由__libc_start_ma ...
- [Linux]异常配置专题之重复配置的有效性：系统/环境变量 | hosts
1 文由 在项目中经常遇到这种情况,1个hosts文件里同一IP 或 域名存在多个映射配置,那么到底哪个有效?环境变量亦有此问题. 问题本身不难,只是为了避免混淆,进行专门记录,以加深记忆. 2 ho ...
- Ubuntu2204部署容器引擎Containerd
为什么使用containerd? 使用containerd的原因主要有两点吧,第一个是docker在k8s1.24以后不再支持,如果需要在k8s中继续使用docker作为容器引擎,我们需要额外部署cr ...
- CommunityToolkit.Mvvm8.1 viewmodel源生成器写法(3)
本系列文章导航 https://www.cnblogs.com/aierong/p/17300066.html https://github.com/aierong/WpfDemo (自我Demo地址 ...
- 一款能“干掉” ChatGPT 的应用「GitHub 热点速览」
据说有了它,ChatGPT 就可以靠边站了.因为 Auto-GPT 能更加主动地完成你给他的指定任务,不用做更多的人为干涉,它的推理能力比 ChatGPT 更强,有人用它解放双手做了个 React 网 ...
- 【GPT开发】人人都能用ChatGPT4.0做Avatar虚拟人直播
0 前言 最近朋友圈以及身边很多朋友都在研究GPT开发,做了各种各样的小工具小Demo,AI工具用起来是真的香!在他们的影响下,我也继续捣鼓GPT Demo,希望更多的开发者加入一起多多交流. 上一篇 ...
- 理解Java程序的执行
main 方法 public class Solution { public static void main(String[] args) { Person person = new Person( ...
- 2021.05.09【NOIP提高组】模拟赛总结
2021.05.09[NOIP提高组]模拟赛总结 T1 T2
- 本地socket通讯
本地socket通讯 虽然学过网络socket,但是对于本地socket通讯却不是很熟悉,刚在项目中看到,所以在网上找了一篇介绍的比较详细的,mark下!!! socket ...
- Vue中插槽的使用
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 . 2.分类:默认插槽.具名插槽.作用域插槽 3.使用方式: ①默认插槽 ...