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

相关文章

来自专栏数据小魔方

Xcelsius(水晶仪表)系列11——选择器高级用法(页面级切换工具)

今天继续跟大家分享关于水晶仪表系列选择器高级用法——页面级切换工具。 之前讲过很多关于菜单选择器的用法, 但是那些基本都是基于单个部件及统计图之间的切换,今天这...

2534
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

1695
来自专栏HTML5学堂

移动端H5知识[系列] - “百变”盒模型

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台...

3386
来自专栏练小习的专栏

可视化格式模型-绝对定位

相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元...

18710
来自专栏前端知识分享

第101天:CSS3中transform-style和perspective

1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。

733
来自专栏用户2442861的专栏

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

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

491
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不...

2391
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

1395
来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

3095
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往...

26311

扫码关注云+社区