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

旋转

属性: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);

效果图:

相关推荐

  1. OpenCV的图像颜色空间转换、裁剪与旋转

    2024-07-09 18:02:03       19 阅读
  2. 机器学习流程—数据预处理 转换

    2024-07-09 18:02:03       22 阅读

最近更新

  1. opencv 使用XML和YAML格式来输入输出文件

    2024-07-09 18:02:03       0 阅读
  2. css2024

    2024-07-09 18:02:03       0 阅读
  3. Jangow

    Jangow

    2024-07-09 18:02:03      0 阅读
  4. new一个对象的具体步骤

    2024-07-09 18:02:03       0 阅读
  5. Hive 的 classpath 简介

    2024-07-09 18:02:03       0 阅读
  6. ArcGIS Pro SDK (九)几何 7 多点

    2024-07-09 18:02:03       0 阅读

热门阅读

  1. python的魔法方法

    2024-07-09 18:02:03       6 阅读
  2. virtualbox和docker的区别和优缺点以及如何选择

    2024-07-09 18:02:03       9 阅读
  3. 56、Flink DataStream 的管理执行配置详解

    2024-07-09 18:02:03       7 阅读
  4. 守望数据边界:sklearn中的离群点检测技术

    2024-07-09 18:02:03       9 阅读
  5. 57、Flink 的项目配置概述

    2024-07-09 18:02:03       7 阅读
  6. git杂记

    git杂记

    2024-07-09 18:02:03      7 阅读
  7. [Python学习篇] Python面向对象——继承

    2024-07-09 18:02:03       5 阅读