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之自定义视频播放器

4882
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 padding 篇

对于block元素 1.没宽度设置的情况:垂直向外扩张,水平向内挤压 上下padding会增加元素占据的尺寸(即看上去高度在增加),左右因为元素宽度...

923
来自专栏前端知识分享

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

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

1002
来自专栏菜鸟前端工程师

JavaScript学习笔记024-默认行为0滚轮事件

862
来自专栏Coco的专栏

滚动视差?CSS 不在话下

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

3337
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

925
来自专栏运维小白

开源博客markdown插入表格语法

普通的表格 Markdown 代码: | 一个普通标题 | 一个普通标题 | 一个普通标题 | | ------ | ------ | ------ | | 短...

22810
来自专栏别先生

HTML+CSS小实战案例

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

4569
来自专栏前端说吧

css布局 - 垂直居中布局的一百种实现方式(更新中...)

1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值)

3161
来自专栏Elson's web

30分钟彻底弄懂flex布局

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

1.7K18

扫码关注云+社区