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空间, ...
随机推荐
- STM32 HAL库学习（F407ZGT6） （1）-晶振/时钟树
时钟树(以F407为例) 对于 STM32F4 系列的芯片,正常工作的主频可以达到 168Mhz,但并不是所有外设都需要系统时钟这么高的频率,比如看门狗以及RTC只需要几十Khz的时钟即可.同一个 ...
- Java高频面试题（2023最新整理）
Java的特点 Java是一门面向对象的编程语言.面向对象和面向过程的区别参考下一个问题. Java具有平台独立性和移植性. Java有一句口号:Write once, run anywhere,一次 ...
- ACM-NEFUOJ-汉诺塔问题
P200汉诺塔 #include<bits/stdc++.h> using namespace std; int main() { int n,i; long long s[40]; s[ ...
- selenium验证码处理-打码平台操作
1.进入打码平台(超人,斐斐) 斐斐-------官网: 超人-------官网: 2.选择对应的开发文档,下载对应的demo示例,并把demo的python脚本放到项目包管理地址去 参考: 超人的开 ...
- 二进制安装Kubernetes（k8s） v1.21.13 IPv4/IPv6双栈
二进制安装Kubernetes(k8s) v1.21.13 IPv4/IPv6双栈 Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes二进制安装 后续尽可能第一时间更 ...
- [网络]公共网络安全漏洞库： CVE / CNCVE
本文博主的经历与该博文处理绿盟科技安全评估的系统漏洞 - 博客园的经历相同: 处理[第三方网络安全公司]给[公司产品]的[客户的服务器]扫描后生成的[安全漏洞报告]. 1 前言 以网络安全行业中最大的 ...
- c/c++快乐算法第三天
c/c++感受算法快乐(3) 开始时间2023-04-16 22:21:10 结束时间2023-04-17 00:09:34 前言:很好,这周就要结束了,大家都回学校了么,嘻嘻.回顾一下昨天的算法题, ...
- 手写 HashSet的底层 和 迭代器
1 package Test.CollectionIterator; 2 import java.util.Iterator; 3 public class MyHashSet2<E> i ...
- Midjourney：一步一步教你如何使用 AI 绘画 MJ
一步一步如何使用 Midjourney 教程:教学怎么用 MJ? 一.Midjourney(MJ)是什么? Midjourney是一款使用文字描述来生成高质量图像的AI绘画工具.这篇文章主要介绍了Mi ...
- 一文详解RocketMQ-Spring的源码解析与实战
摘要:这篇文章主要介绍 Spring Boot 项目使用 rocketmq-spring SDK 实现消息收发的操作流程,同时笔者会从开发者的角度解读 SDK 的设计逻辑. 本文分享自华为云社区< ...