首页 > PHP资讯 > HTML5培训技术 > CSS3 transform 详解

CSS3 transform 详解

HTML5培训技术
最近在做H5,发现还是对transform了解的不是特别深刻,这里做一个总结。

CSS3 transform

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性

rotate()
// 旋转

skew()
// 倾斜

scale()
// 缩放

translate(,)
// 变动, 位移
  • transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
是以当前元素的中心为重心,旋转顺时针开始。0deg就是普通的状态,180deg将会倒置

  • transform : skew():

含义:倾斜 
单位:deg 
用法:以自身元素为基础,值为正数时向右倾斜skew(44deg),值为负数时向左倾斜(-44deg)
特殊值:-90deg,90deg,视觉上元素消失。180deg,-180deg恢复。一次类推

  • transform:scale():

含义:比例
单位:无
用法: 值为正数value>1时按照数值比例放大transform:scale(1.5),
值为正数0<value<1时按照数值比例缩小transform:scale(0.5),
值为负数时:-1< value <0 时,同样缩小|value|并且rotate(180deg),
值为负数时:value < -1时,放大|value|并且rotate(180deg)

  • transform:translate(x,y):

含义: 变动,位移
单位: px(rem)
用法: 把目标元素中点理解为平面坐标系的(0px,0px),所有的操作全部基于(0,0)起始点。

南京HTML5培训课程http://www.thinksite.cn/list-65-1.html

本文由欣才IT学院整理发布,未经许可,禁止转载。