《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。
你将学到
CSS3 3D 转换的常用API介绍
CSS3 3D 应用场景
CSS3 3D 实现一个立方体
开始
1.CSS3 3D 转换的常用API介绍
首先先上一张css 3D的坐标系:
接下来我们来介绍几个常用的api:
旋转
rotateX()
rotateY()
rotateZ() 以上几个api分别代表绕x,y,z轴旋转,如下例子为绕x轴旋转的例子:
相关代码如下:
<style>
.d3-wrap {position: relative;width: 300px;height: 300px;margin: 120px auto;/* 规定如何在 3D 空间中呈现被嵌套的元素 */transform-style: preserve-3d;transform: rotateX(0) rotateY(45deg);transform-origin: 150px 150px 150px;
}.rotateX {width: 200px;height: 200px;background-color: #06c;transition: transform 2s;animation: rotateX 6s infinite;
}@keyframes rotateX {0% {transform: rotateX(0);}100% {transform: rotateX(360deg);}
}
</style>
<div class="d3-wrap"><div class="rotateX"></div>
</div>
位移(Transform)
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值 以上几个api分别代表相对x,y,z轴的位移,如下例子为向z轴位移的例子:
这里我们需要注意的是为了能看出位移的效果,我们需要在父容器上加如下属性:
.d3-wrap {transform-style: preserve-3d;perspective: 500;/* 设置元素被查看位置的视图 */-webkit-perspective: 500;
}
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。代码如下:
.d3-wrap {position: relative;width: 300px;height: 300px;margin: 120px auto;transform-style: preserve-3d;perspective: 500;-webkit-perspective: 500;transform: rotateX(0) rotateY(45deg);transform-origin: center center;
}.transformZ {width: 200px;height: 200px;background-color: #06c;transition: transform 2s;animation: transformZ 6s infinite;
}@keyframes transformZ {0% {transform: translateZ(100px);}100% {transform: translateZ(0);}
}
3D缩放
scaleX(x) 给定一个 X 轴的3D 缩放转换值
scaleY(x) 给定一个 Y 轴的3D 缩放转换值
scaleZ(x) 给定一个 Z 轴的3D 缩放转换值 缩放设置和上面的类似,这里就不做过多介绍了。
理论上说以上三种常见变换已经够用了,值得关注的是我们要想让元素呈现出3D效果,以下不可忽视的API也很重要:
2.CSS3 3D 应用场景
css 3D主要应用在网站的交互和模型效果上,比如:
3D轮播图
3D产品介绍
室内3D仿真
h5 3D活动页面,比较典型的就是某年淘宝的年终总结H5
3D数据可视化成图
3D模型图 其实如果css 3D用的熟悉了,一些基本的3D模型完全可以用css画出来。
3.CSS3 3D 实现一个立方体
核心思路就是用6个面去拼接,通过设置rotate和translate来调整相互之间的位置,如下:
具体代码如下:
.container {position: relative;width: 300px;height: 300px;margin: 120px auto;transform-style: preserve-3d;/* 为了让其更有立体效果 */transform: rotateX(-30deg) rotateY(45deg);transform-origin: 150px 150px 150px;animation: rotate 6s infinite;
}
.container .page {position: absolute;width: 300px;height: 300px;text-align: center;line-height: 300px;color: #fff;background-size: cover;
}
.container .page:first-child {background-image: url(./my.jpeg);background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {transform: rotateX(90deg);transform-origin: 0 0;transition: transform 10s;background-color: rgba(179, 15, 64, 0.6);background-image: url(./my2.jpeg);
}.container .page:nth-child(3) {transform: translateZ(300px);background-color: rgba(22, 160, 137, 0.7);background-image: url(./my3.jpeg);
}.container .page:nth-child(4) {transform: rotateX(-90deg);transform-origin: -300px 300px;background-color: rgba(210, 212, 56, 0.2);background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {transform: rotateY(-90deg);transform-origin: 0 0;background-color: rgba(201, 23, 23, 0.6);background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {transform: rotateY(-90deg) translateZ(-300px);transform-origin: 0 300px;background-color: rgba(16, 149, 182, 0.2);background-image: url(./my6.jpeg);
}
html结构
<div class="container"><div class="page">A</div><div class="page">B</div><div class="page">C</div><div class="page">D</div><div class="page">E</div><div class="page">F</div>
</div>
扩展
我们可以基于上面介绍的,给父元素添加动画或者拖拽效果,这样就可以做成更有交互性的3D方块了,比如「置骰子游戏」,「vr场景」,「3D相册」等等,具体实现我会抽空依次总结出来,记得关注哦~
V6.Dooring, 让可视化大屏制作, 更简单
最后
如果想了解更多webpack,node,gulp,css3,javascript,nodeJS,canvas等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。
以上便是本次分享的全部内容,希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视相关推荐
- 《前端5分钟》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...
- 前端:使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- python随手记自动记账_菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记
原标题:菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记 每个月都有各种各样的开销,不当家不知道柴米贵呀!柴米油盐酱醋茶样样都要开销,吃的穿的,各种开销,每个月都没有啥结余,小编月初是富人,月底 ...
- 无需代码,极简5步大屏可视化教程,3分钟就能轻松做出酷炫报表
上一期主要讲述了如何巧用工具,无需代码,就能做出EXCEL无法实现的可视化数据联动效果,收到不少私信,想要我专门出一期教程,手把手讲述如何从零开始制定私人化的大屏效果. 其实想要做出一个酷炫的报表真的 ...
- Win11新特性:在平板锁屏界面还有酷炫的3D视差效果
在深入挖掘 Windows 11 系统之后,用户再次发现了隐藏的 Windows 10 Mobile 保留功能.知名破解达人 ADeltaX 表示,如果你的设备有合适的硬件,Windows 11 将在 ...
- Android之——史上最简单最酷炫的3D图片浏览效果的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量 ...
- Android 酷炫的3d立体圆柱动画效果实现
最近在drrible上看到一个超酷炫的效果,立体圆柱缓慢上升:https://dribbble.com/shots/7077455-Spending-analytics 然后准备实现一波,做之前在网上 ...
- 纯CSS实现酷炫渐变色、旋转动画特效
一.效果展示 首先来看一下我们最终要实现的效果: 旋转放大: 垂直下落: 旋转掉落: 接下来我们就用CSS进行实现. 二.代码实现 1.定义盒子 此时的效果: 2.添加hover伪类选择器 此时效果: ...
最新文章
- opencv把图片转换成二进制_如何增强图像,然后使用Python和OpenCV将其转换为二进制图像?...
- 参观中央财经大学机房安装centos6.4及优化小结
- IDEA 运行键是灰色
- android 通讯录字母排序,Android仿微信联系人字母排序效果
- ASP.NET MVC 入门4、Controller与Action
- JAVA标准包不存在_JAVA中引入自建包时提示包不存在
- Spark开发入门与实践(一)
- CSS Li点击有蓝色浮层
- 药物不良反应数据库信息的下载
- windows7旗舰版下载出现蓝屏代码50怎么办?
- html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客
- 测试语文读音标准的软件,普通话发音测试题库手机版apkv3.3.1安卓最新版
- QR码国家标准(图片和表格后续会更新)
- unity2d里实现鼠标拖拽物体的功能
- html表格背景图片格式,css背景颜色、背景图片,以及列表的多种样式
- 制冷与空调作业题库及答案
- 与化学相关的计算机应用情况,计算机化学的发展、应用与展望
- 协同学:大自然构造的奥秘-哈肯-3
- 【技术贴】全盘文件夹快捷方式 杀毒后快捷方式消失,但文件夹打不开。重装系统后还是快捷方式的解决办法。...
- 美国iPS细胞治疗癌症最新进展
热门文章
- 餐厅无线AP覆盖具有哪些特点
- putty远程桌面连接linux,PuTTY + Xming 远程使用 Linux GUI
- java二进制转为汉字_Java 实现中文与二进制代码互转
- iStat菜单入门指南:菜单栏项目未显示怎么解决
- zbbz的lisp_在博客园添加Lisp(或其它)代码高亮
- 如何在正文插入页眉页脚 要求奇偶页不一样
- 【Matlab 克里金】克里金插值
- 最新可乐个人发卡网源码V2.0 仿DS网美化加强版
- 微商成功神器,python程序员教你,一键分析微信好友近期所有信息
- 摩拜共享单车数据分析项目报告