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 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展(二)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wo...

340
来自专栏cnblogs

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 ? .content-size, .border-size{ ...

1808
来自专栏进击的君君的前端之路

CSS理解之Float

1424
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

622
来自专栏小巫技术博客

A012-Anim资源

705
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

2386
来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

881
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展 一 一 一 一 一 一 一 一

       我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目。浮动真正的意义在哪里呢?要知道这个问题的答...

431
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

573
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

20410

扫描关注云+社区