CSS3笔记——转换

CSS3 Transform

让一个元素在坐标系统变形。包含一系列变形函数，可以移动、旋转和缩放元素。

兼容性：

IE12+、FireFox16+、Chrome36+、Safari16+、Opera23+

CSS 2D转换

旋转rotate

通过指定的角度参数，对于原元素指定一个2D旋转

语法：

transform: rotate(角度)

参数说明：

单位deg；

正数表示顺时针旋转，负数表示逆时针旋转。

移动translate

根据左（X轴）、顶部（Y轴）位置给定的参数，从当前元素位置移动。

省略第二个参数，默认为0。

语法：

transform: translateX（x）    水平方向移动

transform: translateY（y）    垂直方向移动

transform: translate（x，y）  水平方向和垂直方向**同时**移动

参数说明：

长度单位

缩放 scale

指定对象的2D缩放

省略第二个参数，默认相同，就变成等比例缩放了。

X轴，以垂直中间线为原点缩放。Y轴以水平中间线。

语法：

transform: scaleX（x）    水平方向缩放

transform: scaleY（y）    垂直方向缩放

transform: scale（x,y）   水平、垂直方向同时缩放

单位：数值 0~1。

扭曲 skew

指定对象斜切扭曲，单位：deg

忽略第二个参数，默认为0。

语法：

transform: skewX（角度deg）    水平方向扭曲变形

transform: skewY（角度deg）    垂直方向扭曲变形

transform: skew（x角度,y角度）   水平、垂直方向同时扭曲变形

CSS 3D转换

旋转

在对应轴上旋转

语法

transform: rotateX(角度deg)      X轴      

transform: rotateY(角度deg)      Y轴 

transform: rotateZ(角度deg)      Z轴 （视觉上像时钟）

transform: rotate3d(x,y,z,角度)  整合

补充说明：

x,y,z值可以是0或1，代表有无。

只要三者中有一个是1，第四个参数便可以使用0.001~1之间的数值。

3D移动

语法：

transform: translateZ（角度deg）            Z轴方向移动

transform: translateZ（x角度,y角度,z角度）   整合

3D缩放

语法：

transform: scaleZ（x）      Z轴方向缩放

transform: scale3d（x,y,y） 整合

单位：数值 0~1。