HTML（二）transform属性

transform 有四个属性：

• 位移：translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)
    % ——相对于自身宽高的百分比
    px
• 缩放：scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz)
• 旋转：rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)
    deg
• 斜切：skew(x-angle,y-angle)、skewX(angle)、skewY(angle)
    deg

如果 translate 、skew 只有一个参数，就代表 translateX 、skewX；
如果scale 只有一个参数，代表 scale (x , y)

一、translate属性与其他属性组合导致的特殊问题

scale与translate组合

transform: scale(2) translate(100px);
transform: translate(100px) scale(2);

• transform 组合属性，是按照从左到右的顺序依次实现功能；
• scale在前 translate在后 ,图形会先以transform-origin 为中心扩大/缩小，之后再进行位移，translate位移的距离也会扩大或缩小scale相应的倍数；
• translate在前 scale在后 ，图形会先位移，之后再以transform-origin 为中心扩大/缩小

<div class = "box1">box1</div>
<div class = "box2">box2</div>
<div class = "box3"