html 2d转换

2d转换

transform设置转换效果

transform:scale(); /*缩放，1是原大小，小于1是缩小，大于1是放大*/
transform:rotate(xdeg); /*旋转，deg是角度单位*/
transform:translate(xpx;ypx); /*元素从当前位置位移，x是在x轴位移的长度，y是在y轴唯一的长度*/

transform-origin设置形变中心点

/*元素的默认情况都是以自己的中心点为参考进行转换*/
transform-origin:(xpx,ypx);
/*第一个参数：水平方向；
  第二个参数：竖直方向
  取值有三种形式：
  （1）具体像素
  （2）百分比
  （3）特殊关键字:
       center left top right bottom
*/

旋转的轴向

默认是围绕着z轴旋转
transform:rotateX/Y/Z(deg);
设置围绕旋转的轴；

透视属性

透视：近大远小
perspective:xpx; 数值越小，看的越大；

• 注意：
  • 透视属性必须加到需要呈现透视属性的父元素上