没有合适的资源?快使用搜索试试~ 我知道了~
要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。当然用理论来说明,估计你还不明白。下面是3个gif:沿着X轴旋转沿着Y轴旋转沿着Z轴旋转旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴、Y轴、z轴移动。你可能会说透视比较不好理解,下面我介绍一下透视的几个属性。perspective英文名便是透视,没有这东西就没办法形成3D效果,但是这个东西是怎么让我们浏览
资源推荐
资源详情
资源评论

























手把手教你玩转手把手教你玩转CSS33D技术技术
css3的3d起步
要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看
屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋
转。平移同理。
当然用理论来说明,估计你还不明白。下面是3个gif:
沿着X轴旋转
沿着Y轴旋转
沿着Z轴旋转
旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴、Y轴、z轴移动。
你可能会说透视比较不好理解,下面我介绍一下透视的几个属性。
perspective
perspective英文名便是透视,没有这东西就没办法形成3D效果,但是这个东西是怎么让我们浏览器形成3D 效果的呢,可以看
下面这张图,其实学过绘画的应该知道透视关系,而这里就是这个道理。
但是在css里它是有数值的,例如perspective: 1000px这个代表什么呢?我们可以这样理解,如果我们直接眼睛靠着物体看,
物体就超大占满我们的视线,我们离它距离越来越大,它在变小,立体感也就出来了是不是,其实这个数值构造了一个我们眼
睛离屏幕的距离,也就构造了一个虚拟3D假象。
perspective-origin
由上面我们了解了perspective,而加上了这个origin是什么,我们前面说的这个是眼睛离物体的距离,而这个就是眼睛的视
线,我们的视点的不同位置就决定了我们看到的不同景象,默认是中心,为perspectice-origin: 50% 50%,第一个数值是 3D 元
素所基于的 X 轴,第二个定义在 y 轴上的位置

当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。必须与 perspective 属性一同使用,
而且只影响 3D 转换元素。(W3school)
transform-style
perspective又来了,没错,它是css中3D的关键,transform-style默认是flat,如果你要在元素上视线3D效果的话,就必须用
上transform-style: preserve-3d,否则就只是平面的变换,而不是3D的变换
手把手带你玩转css3-3d
以上我们稍微了解概念,下面就开始实战吧!
我们看一个效果,是不是很酷炫~
如果图片加载不出来,就直接访问https://bupt-hjm.github.io/css3-3d/,觉得可以的话记得给star咯hh
第一步:html结构
很简单的一个容器包裹着一个装了6个piece的piece-box
<div class="container">
<div class="piece-box">
<div class="piece piece-1"></div>
<div class="piece piece-2"></div>
<div class="piece piece-3"></div>
<div class="piece piece-4"></div>
<div class="piece piece-5"></div>
<div class="piece piece-6"></div>
</div>
</div>
第二步: 加上必要的3D属性,进入3D世界
剩余9页未读,继续阅读
资源评论


weixin_38721398
- 粉丝: 5
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 酒店ITM网络技术大比武题库.doc
- 《软件工程与项目管理》第10章软件项目管理.ppt
- (源码)基于PythonDjango框架的疫情信息综合管理系统.zip
- 价值工程在压力容器制造行业项目管理中的应用.docx
- 《网络安全协议IPSec》教学设计.docx
- 当前计算机辅助教学的实践与思考.docx
- 专升本互联网软件应用与开发模拟试题试卷复习资料.doc
- Asp的求职招聘网站设计方案与开发.doc
- 大数据背景下的税收治理问题.docx
- 安徽专升本安大高升计算机基础提高班测试卷(附标准标准答案).doc
- ASP.NET开发大全第23章.登录模块方案设计书.doc
- 探索党员档案信息化的管理新途径.docx
- 新经济时代云计算下会计信息化的应用.docx
- 对网络安全等级保护设计方案的探讨.docx
- (源码)基于Django框架的智能电表数据采集系统.zip
- 软件工程项目思想——C--面向对象程序设计.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
