html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示:
无标题文档
以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意。接着开始着手写样式。
body{perspective: 5800px;}
以上代码是为照片墙设置一个足够大的3D视距,至少能容下所有图片的运动轨迹。
img{position:absolute;height:480px;width:320px;}
以上代码是给每个图片设置样式,给图片一个绝对定位,使其可以被任意地控制位置,此时图片会重叠在一起,宽高取决于照片墙中的的图片的具体尺寸,当然你也可以设置大小,320*480是我举的一个例子。
img:nth-child(1){transform: translateZ(500px);}
img:nth-child(2){transform: translateZ(-500px);}
img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
img:nth-child(4){transform:rotateY(45deg) translateZ(500px);}
img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}
以上代码是给每个图片单独设置样式,使每张图片绕自身Y轴旋转一定角度,角度取决于你放了多少张图片,有n张图,则每张图片依次旋转360/n度,比如这里我放了8张图,那么每张图应依次比上一张图片多旋转360/8=45度,层层递进,如0度、45度、90度、135度、180度、225度、270度、315度,再使每张图片向自身的Z轴(此时每张图片的Z轴方向都已改变)都设置一个正向(全为负值也可)的等距离的位移,使其扩散开,我这里的写法效果也一样,旋转45度位移 - 500px其实和旋转225度位移500px效果是一样的。
俯视图:先自身旋转,再向各个方向扩散。
一定要先旋转,使自身Z轴方向改变再位移,否则会发生如下情况:
先位移后再旋转,由于先位移时所有图片的z轴都为初始方向,会使得所有图片同向位移一段距离,仍然叠在一起,再旋转时也会挤在一起。
接着
div{margin:0 auto;margin-top:600px;
transform-style: preserve-3d;
animation:zhuan 6s linear infinite;height:480px;width:320px;}
@keyframes zhuan{
0%{transform:rotateX(-15deg) rotateY(0);}
100%{transform: rotateX(-15deg) rotateY(360deg);}
}
最后一步:给包着所有图片的div设置绕着初始位置旋转的动画效果即rotateY(360deg),这里要注意是给div设置动画,而不是给图片,否则会变成“自转”,我们需要的效果是“公转”,设置margin使其在浏览器中间显示,方便观察,设置3d视角,接着给动画设置过渡时间6s(旋转快慢,可更改),再设置infinite使其无限循环,为了方便观察我使整个div绕其x轴旋转-15度。
效果图
总结
以上所述是小编给大家介绍的利用css制作3D照片墙效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
html5实现立体照片墙效果,利用css制作3D照片墙效果相关推荐
- 利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环 首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
- 利用css制作3d图片旋转_练习
效果: 鼠标触碰时(停止旋转并高亮): 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
- python照片墙_利用Python制作花式照片墙!就拿这只鹦鹉开刀吧
原材料准备:Python3,图片(最好是某一类图片,一家人整整齐齐) 这里我使用的是"脆皮鹦鹉"表情包,高糊却又不失档次. 佐料:pillow模块,以及一些Python自带的模块 ...
- php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
- php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
- 利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果 实现步骤: 1.制作样式 2.逻辑,思路 实现步骤: 1.制作样式 我们先来看看body中的代码: <body><div class="b ...
- HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向!
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
最新文章
- 实现AGI,强化学习就够了?Sutton:奖励机制足够实现各种目标
- Brocade光纤交换机FOS升级
- python you-get下载视频-使用python库之you-get下载视频
- React Native中pointerEvent属性
- Kubernetes权威指南精彩段落
- 前端学习(2732):重读vue电商网站42之添加富文本编辑器
- 操作es_ES打野皇子操作看呆Uzi:这哥们肯定是深得Lucky真传
- 【手把手带你入门深度学习之150行代码的汉字识别系统】学习笔记 ·001 用OpenCV制作数据集
- 玩转动态编译 - 高级篇:三,实例属性的读取与设置
- Django Ajax文件下载
- 原生android tv 盒子,超强大的安卓7.0电视盒子是什么体验!
- 宝塔面板怎么实名认证_宝塔面板安装和使用图文教程
- 计算机格式按键在哪儿,键盘开关按键在哪里
- IEEE邮件曝光,禁止华为员工审稿!
- 机械师笔记本电脑使用小常识
- ArcGIS教程 - 4 GIS数据
- Draggabilly中文文档
- 机器学习技术:使用深度学习处理文本
- 互联网早报:京东健康宠物医院上线:注册医生超3000名 提供7X24在线健康咨询服务
- c语言模拟鼠标键盘控制电脑