css实现图片的3d旋转-照片墙

一.效果图

二.图片摆放

1.html

这里准备了1个section和7个div，7个div都要求定位在父元素section那里（都在中心点），每个div各一张图，上面效果图有1张在中间的，其余6张图要在周围

<section><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

2.图片位置摆放-旋转

6个图片在周围，看起来就像个六边形，所以每个图都间隔60度，依次旋转就是（0° 60° 120° 180° 240° 300°）

section div:nth-of-type(1){transform:rotateY(0deg);background:url(DSC02240.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(2){transform:rotateY(60deg);background:url(DSC02249.jpg) no-repeat;background-size:220px 350px;
}/*其余类似*/

记得给body加上3d透视效果 perspective:1450px（3d视觉效果）

还有section加上内嵌效果 transform-style:preserve-3d（所有子元素在3D空间中呈现）

2.图片位置摆放-旋转

想象一下从上面往下看，此时图片就被内嵌在一起，像米字形一样，这时候需要让每个图片在z轴添加一个距离（旋转后方向已改变，图片正前方就是z轴的方向）

transform:translateZ(400px);

此时图片位置已经做完

三.动画效果

让大盒子section 360度无限循环的转起来

@keyframes rotations{ /* 添加动画效果 */0%{}100%{transform:rotateY(360deg);}
}

动画在赋予seciton

section{animation:rotations 10s linear infinite;    /*infinite:无限循环*/
}

四.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>view</title>
<style>
body{/*添加3d透视效果*/perspective:1450px;background-color:#000;
}section{position:relative;margin:220px auto;width:220px;height:350px;animation:rotations 10s linear infinite;/*所有子元素在3D空间中呈现*/transform-style:preserve-3d;
}section div{position:absolute;left:0;top:0;width:100%;height:100%;
}/*先旋转在移动*/
section div:nth-of-type(1){transform:rotateY(0deg) translateZ(400px);background:url(DSC02240.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(2){transform:rotateY(60deg) translateZ(400px);background:url(DSC02249.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(3){transform:rotateY(120deg) translateZ(400px);background:url(DSC02308.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(4){transform:rotateY(180deg) translateZ(400px);background:url(DSC02323.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(5){transform:rotateY(240deg) translateZ(400px);background:url(DSC02345.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(6){transform:rotateY(300deg) translateZ(400px);background:url(DSC02268.jpg) no-repeat;background-size:220px 350px;
}
section div:nth-of-type(7){background:url(DSC02746.JPG) no-repeat;background-size:220px 350px;
}@keyframes rotations{ /* 添加动画效果 */0%{}100%{transform:rotateY(360deg);}
}section:hover{/* 鼠标放入动画即停止 */animation-play-state:paused;
}section div:hover{box-shadow:0 0 38px #169FE6; /* 鼠标放入显示阴影 */
}
</style>
</head>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section></body></html>

css实现图片的3d旋转-照片墙相关推荐

css实现图片的3d旋转
今天的内容是,用css实现图片的3d旋转效果,效果如下: 由于不是视频上传不是很熟悉,所以用图片来简单解释,上述的图片效果,但是图片会绕着一个中心点旋转,像一个圆柱体一样. 下面是具体代码,如果有需要 ...
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
最近大家应该都对3D照片墙很心动吧,赶快拿走给女朋友制作一个,让她知道代码的浪漫源码如下: 1.把html 文件和img文件放在同级目录下 2.照片格式要注意是否一致哦 <!DOCTYPE h ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
用CSS实现图片的3D凹凸感(即：凸出镜框外或凹陷镜框里)
Ⅰ.问题描述: 使用css实现图片的3D凹凸感: Ⅱ实现过程如下: 1.展示结果为: A.正常的图片(图一.图二都正常): B.图一凸出镜框外,图二正常: 触发过程:将鼠标放在图一的红色边框内,就会显 ...
html凹凸效果,用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)
Ⅰ.问题描述: 使用css实现图片的3D凹凸感: Ⅱ实现过程如下: 1.展示结果为: A.正常的图片(图一.图二都正常): B.图一凸出镜框外,图二正常: 触发过程:将鼠标放在图一的红色边框内,就会显 ...
css animation 图片65%角旋转,沿着z轴旋转
用css实现图片斜侧着沿着z轴旋转效果一.原始图一.最终效果图底部图片例子: 一.html代码 <div class="active-box" v-show=" ...
利用CSS让图片围绕中心旋转
起因: 需要一个刷新按钮,一点击就自己旋转一圈,刚开始是想到做一个GIF图,点击图片后就换图片路径. 今天创建react脚手架的时候,看到了react的LOGO在自己动,就看了看他的css. 代码: ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...

css实现图片的3d旋转-照片墙

一.效果图

二.图片摆放

1.html

2.图片位置摆放-旋转

2.图片位置摆放-旋转

三.动画效果

四.代码展示

css实现图片的3d旋转-照片墙相关推荐

最新文章

热门文章