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空间, ...
随机推荐
- 集合-LinkedList 源码分析(JDK 1.8)
1.概述 LinkedList 是 Java 集合框架中一个重要的实现,其底层采用的双向链表结构.和 ArrayList 一样,LinkedList 也支持空值和重复值.由于 LinkedList 基 ...
- C++/Qt网络通讯模块设计与实现(六)
前面章节主要讲述网络通讯客户端的实现,各位小伙伴需认真阅读以及理解,理会其中的思想,有疑问的地方可及时给我私信,我都会非常认真地解答大家的疑惑. C++/Qt网络通讯模块设计与实现(一) C++/Qt ...
- LeeCode 回溯问题
1 组合问题 LeeCode 39:组合总和 题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 ta ...
- SQL concat_ws, collect_set, 和explode合并使用
1. 背景 有一个这样的数据集:字段和字段的值是两列 目的是将这个数据转换成规整的一个特征是一列的数据: 2. 做法 第一步:先造出列 select ucid ,CASE WHEN type ='性别 ...
- 彻底解决VSCode无法远程ssh，提示The remote host may not meet VS Code Server‘s prerequisites for glibc and libstdc++
彻底解决VSCode无法远程ssh,提示The remote host may not meet VS Code Server's prerequisites for glibc and libstd ...
- STM32启动分析之main函数是怎样跑起来的
1.MDK目标文件 1)MDK中C程序编译后的结果,即可执行文件数据分类: RAM ZI bss 存储未初始化的或初始化为0的全局变量和静态变量 heap 堆,系统malloc和free操作的内存 s ...
- 【能力提升】SQL Server常见问题介绍及快速解决建议
前言 本文旨在帮助SQL Server数据库的使用人员了解常见的问题,及快速解决这些问题.这些问题是数据库的常规管理问题,对于很多对数据库没有深入了解的朋友提供一个大概的常见问题框架. 下面一些问题是 ...
- 一文搞懂JavaScript数组的特性
前言 数组是几乎所有编程语言的基础语法,JavaScript因为语法特性,之前缺少一些集合类对象,对数组的使用就会更多一些,因此我们更需要理解数组知识. 然而大部分人对数组都已经非常熟悉了,所以本文将 ...
- Prism Sample 7 Module xaml
这一节使用xaml标记甚为不解. 本节注册module 的方式同directory一节很类似.在那一节中,用工厂方法创建一模块目录: protected override IModuleCatalog ...
- ai问答：使用vite如何配置多入口页面
Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用.要在 Vite 中配置多入口,可以: 在 vite.config.js 中定义多个 entry 入口: export defa ...