HTML(26)——平面转换-旋转-多重转换-缩放

A阳俊yi2024-07-10 13:18

旋转

属性：transform:rotate(旋转角度)

角度的单位是deg。

取值为正，顺时针旋转
取值为负，逆时针旋转

默认情况下，旋转的原点是盒子中心点

改变旋转的原点可以使用属性:**transform-origin:**水平原点位置垂直原点位置

取值：

方位名词(left,top,right,bottom,center)
像素单位数值
百分比

例如，要让图片绕右下角旋转

transfrom-origin: right bottom;

多重转换

多重转换技巧：先平移再转换

transfrom: translate() rotate();

    .luntai {
      margin: 30px auto;
      width: 1100px;
      height: 200px;
      border: 3px solid #333;
    }

    img {
      transition: all 4s;
      width: 200px;
    }

    .luntai:hover img {
      transform: translate(700px) rotate(360deg);
    }

当鼠标移入盒子内，轮胎就会向右边滚动

缩放

写法：

transform:scale(缩放倍数);

transform: scale(X轴缩放倍数,y轴缩放倍数);

    .box {
      width: 200px;
      height: 165.58px;
      margin: 100px auto;
      background-color: #333;
    }

    img {
      width: 100%;
      transition: all 1s;
    }

    img:hover {
      transform: scale(2);
    }

该方法是以中心为原点进行缩放，如果直接在hover里面改变图片的大小，则是以左上角为原点

倾斜

属性：transform:skew(xxdeg);

效果图: