码迷,mamicode.com
首页 > Web开发 > 详细

《图解CSS3》笔记2 transform变形

时间:2014-12-03 01:41:59      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:style   sp   for   on   bs   cti   ef   line   tt   

2D transform支持4种变形方式和矩阵, 多种变形函数以空格隔开:

1. 移动  translate(+-xOffset, yOffset)  +右移-左移

2. 缩放  scale(0.01~0.99| >1)      0.01~0.99为缩小,>1为放大

3. 翻转  skew()

4. 旋转  rotate(+-Xdeg)        +顺时针转,-逆时针转X度

5. 矩阵  matrix()

 

3D transform支持3种变形方式和矩阵, 多种变形函数以空格隔开:

1. 移动  translate3d(x, y, z)     translateZ()

2. 缩放  scale3d()          scaleZ()     

3. 旋转  rotate3d()          rotateZ()  rotateX() rotateY()

4. 矩阵  matrix3d()

5. 投影  perspective() 

 

transform-origin: 用来指定变形时,元素中心点的位置(默认:50%),取值有两类:

  1. 关键字:  left center right | top center bottom

  2. 偏移量:   -100% 0% 50% 100% 200%

 

transform-style: 指定3D控件中,内嵌子元素如何呈现,两个值:

  1. flat:   (默认)子元素在2D平面呈现

  2. perserve-3d: 子元素呈现在前面或后面

 

perspective:  观察者与元素3D控件内Z平面的距离(视距):

  1. none  (默认)无线远的角度来看,近乎于平

  2. 数值  数值越大,距离越远,感受越不明显;数值越小,距离越近,感受明显;

 

backface-visibility: 元素的背面是否可见,有两个值: visible | hidden;

 

《图解CSS3》笔记2 transform变形

标签:style   sp   for   on   bs   cti   ef   line   tt   

原文地址:http://www.cnblogs.com/diydyq/p/4138997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!