CSS3-3D相关知识详解—视角以及变形方向

CSS3-3D相关知识详解—视角以及变形方向

HTML5学堂:视角以及变形方向。HTML5中非常不错的一个变革,便是将特效从二维平面上的变化,推进到了三维立体当中。而实现这个的功能就是CSS3!对于三维立体特效的制作,视角以及3D坐标体系的基本知识是实现炫美动画的基础。

CSS3三维立体变形的旋转方向

三维世界中的坐标系如下:

3D transform中有下面这三个方法:rotateX(angle); rotateY(angle); rotateZ(angle)

当angle为正值时,这三种方法的旋转方向是从圆心往坐标轴延伸方向上看时的逆时针方向。

CSS3 perspective 属性

perspective 属性设置的是元素被查看位置的视角.目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

需要注意一点的是,perspective仅对3D转换元素有影响。

当不进行perspective的设置时,默认为不设置透视,如果设置值为0,则也默认为不设置透视。如果设置了非0的数字,则代表元素距离视图的距离,以像素计。

CSS3 perspective-origin 属性

perspective-origin属性定义3D元素所基于的X轴和Y轴。此属性允许改变3D元素的底部位置。当为元素定义 perspective-origin属性时,其子元素会获得透视效果,而不是元素本身

需要注意的有两点,其一,它的兼容性与perspective的兼容性完全相同,只有谷歌和苹果支持替代性的属性;其二,必须与perspective属性一起使用,且仅仅对3D转换造成影响。

属性的取值:可以是百分比或者像素或者top、left、center、right、bottom等

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

谁说不能用代码实现酷炫的文字特效?

HTML5学堂:文本阴影是一个很神奇的属性,在它还没有出现之前,网页中对于阴影的制作一般都是采用Photoshop做成图片来实现的。而在CSS3流行的当下,我们...

4543
来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

3115
来自专栏Elson's web

30分钟彻底弄懂flex布局

在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇?

2.5K23
来自专栏别先生

HTML+CSS小实战案例

HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 <html> 2 <head...

6899
来自专栏Golang语言社区

一篇通俗易懂的CSS层叠顺序与层叠上下文研究

网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说...

3817
来自专栏yang0range

CSS常见属性

现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

1203
来自专栏淡定的博客

html5之自定义视频播放器

7192
来自专栏前端知识分享

第133天:移动端开发的一些总结

640 * 1136的图片能不能在iphone5上完全展示? iphone5分辨率640*1136

1172
来自专栏Coco的专栏

滚动视差?CSS 不在话下

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的...

4237
来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

6916

扫码关注云+社区

领取腾讯云代金券