CSS3之2D与3D变换的实现方法

css3实现了对元素执行2D平面变换,以及视觉上的3D空间变换,2D变换平时可能用的较多,3D效果也能锦上添花;

关于坐标轴

初中数学的几何学里我们便开始接触坐标轴,最基本的是平面直角坐标系 XoY ,然后延伸出空间直角坐标系 XYZ ,现在我们来说一下css中的坐标系;

css甚至一下设备相关的开发中,基本都遵循这样一套坐标系:以手机屏幕为例,坐标系 圆点 位于屏幕最左上角; x轴 水平,向右为正方向; y轴 垂直,向下为正方向; z轴 垂直于整个屏幕平面,向外为正方向,就是屏幕光线射向你眼睛的方向;

如图:

2D变换

包括平移 translate() ,旋转 rotate() ,缩放 scale() ,倾斜 skew() ,矩阵 matrix()

translate(x,y)

平移操作,包括 translateX(x) , translateY(y) ,括号内填平移参数值,可以是负值,即反方向;

例如:

div {
    /*元素向右平移50px,向下移60px*/
    transform: translateX(50px);
    transform: translateY(60px);
}
/*简写形式,效果相同*/
div {
    transform: translate(50px, 60px);
}

注意 translate() 只指定一个值则默认是 x轴 位移,即水平移动;

rotate(deg)

元素旋转,括号中参数为旋转角度, 顺时针 为正值, 逆时针 为负值,单位为 deg ,即多少度;

例如:

div {
    /* 顺时针旋转30° */
    transform: rotate(30deg);
}

scale(x,y)

缩放元素,参数分别为x轴,y轴缩放倍数,包括 scaleX(x)scaleY(y) ,提供一个参数表示 按比例 缩放;

例如:

div {
    /* 横向缩小一半,纵向放大一倍 */
    transform: scale(.5, 2);
}

div {
    /* 按比例放大3倍 */
    transform: scale(3);
}

skew(xdeg,ydeg)

包含 skewX(deg) , skewY(deg) ,表示在水平和垂直方向倾斜的角度;

例如:

div {
    transform: skewX(30deg);
    transform: skewY(45deg);
}
/* 简写 */
div {
    transform: skew(30deg, 45deg);
}

需要 注意 ,如果元素为一个矩形,那么 skewX(30deg) 表示矩形 顶边固定 ,底边 向右 倾斜 30degskewY(30deg) 表示矩形 左边框固定 ,右边框 向下 倾斜 30deg

可以根据上面讲的屏幕坐标系来记忆,x轴位于屏幕顶部,方向向右;y轴位于屏幕左部,方向向下;

如果 skew() 只指定一个值,默认是 水平倾斜

skewX(30deg)的效果:

skewY(30deg)的效果:

matrix(a,b,c,d,e)

这是一个综合属性,之前的平移,缩放,旋转,倾斜都能通过这个矩阵函数实现,对,大学里 线性代数 中的矩阵 T_T;

其实这个函数就是前面四种操作的 原理 ,函数共有六个参数,四种操作都对应不同的参数改变方式,像我们这种非数学专业的就不赘述原理了,前面的操作基本够用了(想寻找刺激就去百度“css matrix”吧)~~;

3D变换

所谓3D就是在前面2D平面上多了一个 z轴 ,方法名也差不多,然后能以分别以三根轴位基准进行变换,实现立体效果;

看一下所有3D操作方法:

translate3d(x,y,z)

结合前面讲的空间坐标系和 x, y, z轴的位置,三个参数分别对应元素在三个坐标轴方向的平移值,也包含三个方法 translateX(x) , translateY(y) , translateZ(z)

举例:

div {
    transform: translateX(50px);
    transform: translateY(60px);
    transform: translateZ(70px);
}
/* 简写 */
div {
    transform: translate3d(50px, 60px, 70px);
}

注意:关于设置

CSS3之2D与3D变换的实现方法

扫一扫手机访问