传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 2D/3D转换

2017-10-11 23:22| 发布者: admin| 查看: 1221| 评论: 0|来自: 蚂蚁部落

传智播客

关于transform变换的实质可以参阅CSS3 transform一章节。

一.transform 2D变换:

transform 2D变换是平面空间对坐标系进行变换,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/11/225454x766q644o8eliojo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

水平方向是x轴,垂直方向是y轴;与普通坐标系不同的是,y轴向下表示正。

transform 2D变换方法:

(1).translate(x,y)方法,具体可以参阅CSS3 translate(x)一章节。

(2).scale(x,y)方法,具体可以参阅CSS3 scale(x)一章节。

(3).rotate(angle),具体可以参阅CSS3 rotate()一章节。

(4).skew(x-angle,y-angle),具体可以参阅CSS3 skew()一章节。

transform 2D变换属性:

(1).transform-origin可以参阅CSS3 transform-origin一章节。

二.transform 3D变换:

transform 3D变换是在三维空间的变换,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/11/231102f9vvcna3cbv30gc3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具有水平的X轴和垂直的Y轴,还多出了一个Z轴。

假设显示器中心是原点,原点往右就是X轴正方向,往下就是Y轴正方向,屏幕前方(对着人脸)就是Z轴的正方向。

transform 3D变换方法:

(1).translate3d(x,y,z)方法可以参阅CSS3 translate3d()一章节。

(2).scale3d(x,y,z)方法可以参阅CSS3 scale3d()一章节。

(3).rotate3d(x,y,z,angle)方法可以参阅CSS3 rotate3d()一章节。

(4).skew(x-angle,y-angle)方法可以参阅CSS3 skew()一章节。

(5).perspective(n)方法可以参阅CSS3 perspective(n)一章节。

transform 3D变换属性:

(1).transform-origin属性可以参阅CSS3 transform-origin一章节。

(2).transform-stylek属性可以参阅CSS3 transform-style一章节。

(3).perspective属性可以参阅CSS3 perspective一章节。

(4).perspective-origin属性可以参阅CSS3 perspective-origin一章节。

(5).backface-visibility属性可以参阅CSS3 backface-visibility一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 transform下一篇:CSS3 translate(x,y)

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:25 , Processed in 0.062073 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部