CSS3 2D变换函数包括:translate()、scale()、rotate()和skew()。
transform: none|transform-functions;
transform属性让元素在一个坐标系中变形,包含一系列变形函数,移动、缩放和旋转元素。可同时对一个元素进行变形的多种属性操作,在多个变形函数使用时需要用空格隔开。
transform-origin属性:
transform-origin: x-axis y-axis z-axis;
该属性用来指定元素的中心点位置,默认变形原点在元素中心,即X轴和Y轴的50%处。
该属性有多种写法,此处简单列出常用的几种:(图转)
translate()函数:变换元素在水平和垂直偏移!
translate(dx) 水平移动
translate(dx, dy)
translateX(dx) 水平移动
translateY(dy) 纵轴方向移动
可以取一个值dx,也可以取dx,dy,取正值向坐标轴X,Y正方向移动,反之反向移动。translate类型与相对定位!
用 CSS3 属性的垂直水平居中方法:
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
translate 与绝对定位、相对定位的区别:
1.translate和使用相对定位元素的 offsetLeft 和 offsetTop 属性不同:(从页面布局的角度看)
使用translate定位的元素在 offsetTop 和 offsetLeft始终固定不变的,等于该元素到文档的原始left和top,无论水平垂直移动了多少都是没影响d!
而使用相对定位的元素的offsetTop 和 offsetLeft 的数值则根据移动位移的长度发生相应变化。
这点估计会让js编程获取不到相应的值而蒙蔽哈哈哈!
2.translate和使用绝对定位实现的动画效果:(从动画角度来说)
使用 translate 来制作的动画比绝对定位的动画更加平滑!
原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移,而使用 translate 函数的动画则可以不受像素的影响,以更小的单位进行位移。translate可以让 GPU 参与运算,动画的 FPS 更高。
总结:position 是为页面布局而服务!transform 是为动画而生的!
3.scale()函数: 水平和垂直的缩放
scale(sx, sy) 取值 正数、负数和小数
scaleX()
scaleY()
这个看文档就行,没什么好介绍的(●’◡’●),要学会哦
http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_scale.asp
4. rotate()函数:旋转元素
rotate(a):取正值顺时针旋转,负值逆时针旋转
注意点:
1.默认旋转中心为元素的中心,可以修改transform-origin来修改旋转基准点。
2.旋转元素的内容或者子元素都会跟着旋转,此时可以通过反向旋转来抵消。
.parent{
transform: rotate(-36deg);
}
.children{
transform: rotate(36deg);
}
5.skew()函数:元素水平垂直方向倾斜
skew(ax)
skew(ax,ay)
skewX(x)
skewY(y)
同样,默认变形基准点为元素中心,可通过transform-origin属性来更改。
应用:制作倾斜导航!技巧:父斜子反斜!,就可以制作特殊的形状啦!
总结:总结了CSS3中的2D变换,四大变形函数,以及translate 与绝对定位、相对定位的区别,rotate()函数的应用技巧和shew()函数的使用场景和技巧!打好基础,才能很好运用CSS3中的3D变换。