小炫酷的3D旋转立方体相册
小炫酷的3D旋转立方体相册
前言
今年是特别的一年,是特别宅的一年,大家都宅在家做贡献。在这个逆战时期,让我们发挥逆战精神,一起来敲代码吧!
正文
今天,我们来做一个有点小炫酷的3D旋转立方体相册。那么首先,让我们来了解一下3D。
3D(立体空间)
属性:
perspective
景深(近大远小),是观察物体的一个视角距离,距离越小效果越明显,它的数值一般为900px-1200px。
使用方法:
perspective:1200px;(在父元素中使用)
transform:perspective(1200px);(在子元素中使用,但是我们一般不用这种方法)
transform-style
使用方法:
transform-style:preserve-3d;(让当前元素形成一个3D空间)
perspective-origin
观察3D元素的角度(位置)
使用方法:
perspective-origin: left top;
perspective-origin: center center;
perspective-origin: 50% 50%;
perspective-origin: 0px 0px;
功能函数:
translate()3D位移
使用方法:
transform:translate3d(x,y,z);
transform:translateX();(X轴上的位移)
transform:translateY();(Y轴上的位移)
transform:translateZ();(Z轴上的位移)
注意: z不能为百分比。
rotate()3D旋转
使用方法:
transform:rotate3d(x,y,z,a);(建议取值0或1,0不旋转,1旋转)
- x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
- y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
- z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
- a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
transform:rotateX();(数值为度60deg为60度)
transform:rotateY();(数值为度60deg为60度)
transform:rotateZ();(数值为度60deg为60度)
scale()3D缩放
使用方法:
transform:scale3d(x,y,z);(缩放比例)
transform:scaleX();(X轴上的缩放)
transform:scaleY();(Y轴上的缩放)
transform:scaleZ();(Z轴上的缩放)
注意:
默认值为1,大于1为放大,小于1大于0为缩小;
单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。
实现:
下面是一个简单的3D旋转立方体相册
效果
小炫酷的3D旋转立方体相册相关推荐
- 几个炫酷的3D旋转动态效果(附代码)
之前,我们发布了极客编程挑战赛,竞赛题目是"制作炫酷的3D旋转动态显示效果",想知道更多信息,请前往以下地址进行了解:http://www.gbtags.com/gb/share/ ...
- 送给女友超级炫酷的3D旋转动态图——Python及Matlab代码实现
目录 1 Python爬取美女照片 3 Matlab动态视频及代码 写在前面 今天这篇文章我准备了很久,但是运行出来很值得. 属于散漫闲谈,毕竟涉及到一个浪漫的思想系统,故建议读者按目录次序逐一浏 ...
- 超级炫酷的3D旋转动态图——Python代码实现
- 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
- ❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
- 纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
- 【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面 关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
- HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
- 3d旋转立方体特效,可自由旋转,超强透视效果的html页面源码
大家好,今天给大家介绍一款,3d旋转立方体特效,可自由旋转,超强透视效果的html页面源码 (图1).送给大家哦,获取方式在本文末尾. 图1 可以用鼠标自由全角度旋转(图2) 图2 代码完整,需要的朋 ...
- Android炫酷的3D球型标签云开源库 3dTagCloudAndroid 的使用
Android炫酷的3D球形标签云开源库 3dTagCloudAndroid 的使用 文章目录 Android炫酷的3D球形标签云开源库 3dTagCloudAndroid 的使用 学习过程 使用体会 ...
最新文章
- 阿里python面试题和答案_阿里的python大牛总结10条Python面试题陷阱,中招了吗?...
- 埃拉托斯特尼筛法(埃筛)
- apache安全—用户访问控制
- 腾讯视频如何缓存视频
- Vue Router history模式的配置方法及其原理
- 蓄势待发!一加10 Pro获3C认证:搭载80W快充+2K LTPO屏
- mysql影响行数解析_详解MySQL的数据行和行溢出机制
- ISCC2018(misc)
- 中国碳酸锰(CAS+598-62-9)市场趋势报告、技术动态创新及市场预测
- 【WinCE版凯立德】2012春季版地图下载
- 使用Java复制文件并在控制台显示文件进度
- HTML页面跳转的几种方式(重定向)
- 计算机桌面运维问题分类,桌面运维工程师常见面试问题汇总
- 关于Bootstrap 中使用Tooltips不生效的问题
- 1秒50万字!js实现关键词匹配
- EF 正在运行转换: System.Reflection.TargetInvocationException: 调用的目标发生了异常。
- 业余学Python是如何挣钱的?
- 高中计算机专业班主任工作总结,大学班主任工作总结5篇
- Linux ❉ su 命令介绍及主要用法
- Mipi SoundWire Spec 学习笔记(欢迎交流,持续更新)
热门文章
- python: not found 问题的解决
- 搜狗浏览器显示无法解析服务器的DNS,Win10专业版下搜狗浏览器DNS解析失败
- sqlalchemy的基本操作大全
- jojo第七部dio怎么复活_不是很懂第七部DIO爷是怎么死的
- 论文查重的标准是怎样的?
- Alfa eBooks Manager(电子书管理软件)v8.1.7.3官方版
- linux16.04 根目录多大,Ubuntu 18.04 根目录为啥只有 4G 大小
- 解决MAC用HDMI连接显示器就没声音问题
- 华为交换机常见VLAN操作
- python模拟ios点击_弱弱的问下,ios的捷径可以实现模拟点击吗?