前端初体验——css 变形 学习

变形 transform 属性

用于设置变形，该属性支持一个或多个变形函数 变形函数如下：

1. 移动：

translate（tx[,ty]）沿着x轴移动tx距离 沿y轴移动ty距离 ty可以省略 如果省略则ty默认为0

translate3d(tx,ty,tz);沿着x轴移动tx距离 沿y轴移动ty距离 沿着z轴移动tz距离

traslatX(tx)沿着x轴移动tx距离

traslatY(ty)沿着y轴移动ty距离

traslatZ(tz)沿着z轴移动tz距离

transform: translate(200px，100px); 
transform: translateZ(200px); 
transform: translate3d(50px,80px,30px);

2. 缩放：

transform: scale(sx,sy); 元素沿x轴的缩放比为sx 元素沿y轴的缩放比为sy sy可以省略

省略表示sy=sx

scale3d(sx,sy,sz);沿x轴的缩放比为sx 沿y轴的缩放比为sy 沿z轴的缩放比为sz

scaleX(sx) 沿x轴的缩放比为sx

scaleY(sy) 沿y轴的缩放比为sy

scaleZ(sz) 沿z轴的缩放比为sz

transform: scale(1);         /*不变*/
transform: scale3d(2,2,5);
transform: scaleX(5);

3. 旋转

transform: rotate(angle) 元素绕Z轴顺时针转angle角度

transform: rotateX('angle');元素绕X轴顺时针转angle角度 上线向屏幕里转

transform: rotateY('angle');元素绕Y轴顺时针转angle角度 右线向屏幕里转

transform: rotate3d(x,y,z,angle);元素绕指定轴旋转

transform: rotateX(30deg);
transform: rotateX('angle');
transform: rotateY('angle'); 
transform: rotate3d(10px,15px,5px,180deg); 

4.  倾斜

skew(xAngle [,yAngle]) 元素沿着X轴倾斜xAngle角度 元素沿着Y轴倾斜yAngle角度 yAngle可以省略如果省略y=0

skewX(xAngle)元素沿着X轴倾斜xAngle角度

skewY(yAngle)元素沿着Y轴倾斜yAngle角度

transform: skew(20deg,20deg); 
transform: skewY(10deg); 

5.设置变形中心点

transform-origin: 属性值可以为百分比可以为px 可以为top left

transform-origin:

6.3d透视

 近大远小 perspective 要作用在父级元素上 值越小 效果越明显

body{
    perspective: 500px;
}

7.3d嵌套

transform-style  子元素是否呈现3d嵌套效果

transform-style:preserve-3d 保留3d嵌套效果（覆盖关系 穿过效果）

body{
    perspective: 500px;
    transform-style:preserve-3d ;
}

8.3d 背面是否可见  

   backface-visibility: visible;背面可见

   backface-visibility:hidden; 背面隐藏

 backface-visibility:hidden;