平面转换的位移，旋转，缩放，渐变

赵大宝子

已于 2022-10-17 22:35:26 修改

阅读量267

点赞数

文章标签：平面 css 前端

于 2022-10-17 22:29:58 首次发布

本文链接：https://blog.csdn.net/m0_73920697/article/details/127377180

版权

一、平面转换2D

(一)什么叫平面转换：transform-位移、旋转、缩放、渐变

1、位移(transfrom)

(属性值)translate

(取值)有两种1.百分比 50% 2.像素单位取值10px

2、总结技巧，如果transform：translate(300px)只仅仅取一个值得时候，就会出现只仅仅沿着X轴移动。

transfrom：translateX/Y时候，只仅仅沿着其中一个轴移动，这里要强调一点，css样式具有层叠性，所以不要分开写。

二、旋转rotate

1.transfrom：rotate（角度）单位deg------可取正值，顺时针转动

--------负值，逆时针转动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>旋转效果</title>
  <style>
    img {
      width: 250px;
      transition: all 2s;
    }

    img:hover {
      /* 平移，旋转，放缩，渐变都属于transform */
      /* 取值rotate（角度360单位deg） */
      /* 取正值，顺时针。 */
      transform: rotate(360deg);
      /* 取负值，逆时针。 */
      transform: rotate(-360deg);
    }
  </style>
</head>

<body>
  <img src="./images/rotate.png" alt="" />
</body>

</html>

注-- 默认的旋转原点是水平，垂直的居中的点

2.默认的旋转点可以更改-----transfrom-origin(加给需要更改的元素本身）=====可取值方位名词（最常用）====left top right bottom center

====像素单位

====百分比

需求：以下代码更改是鼠标悬停时候更改旋转原点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>转换原点</title>
  <style>
    img {
      width: 250px;
      border: 1px solid #000;
      transition: all 6s;
    }

    img:hover {
      transform: rotate(720deg);
      /* 默认旋转原点垂直，水平居中的原点，可以更改旋转原点的位置 */
      /* 属性transform-origin：采用方位名词比较多top left right bottom cebter */
      transform-origin: right bottom;
    }
  </style>
</head>

<body>
  <img src="./images/rotate.png" alt="" />
</body>

</html>

三、多重转换transfrom复合属性

   <style>
        div {
            transform: translate(600px) rotate(360deg);
        }
    </style>

注意点：1.transform做复合属性，做多重转换不能分开写，后面的会层叠前面的。

2.如果将复合属性颠倒写出来，将rotate写在translate前面会出现旋转会修改元素平面轴的方向，所以多重转换不要写在前面。错误代码演示如图一，正确代码图二

图一

  <style>
        div {
            transform: rotate(360deg) translate(600px);
        }
    </style>

图二

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>多重转换</title>
  <style>
    .box {
      width: 800px;
      height: 200px;
      border: 1px solid #000;
    }

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

    .box:hover img {
      /* 写复合属性的时候不能颠倒， */
      /* 注意点：1.要做复合属性，多重转换不能分开写，后面的属性会覆盖后面的
      2.要先写位移，在写旋转，因为旋转会修改元素平面轴的方向，所以在多重转换时候，不要先写旋转，要
      先写位移 */
      /* 复合属性 */
      transform: translate(600px) rotate(360deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/tyre.png" alt="" />
  </div>
</body>

</html>

四、缩放scale（X轴 Y轴的放大倍数）

对于transfrom:scale总结
1、只给scale一个值，表示X轴Y轴等比例缩放

2、scale取值====大于1表示放大

======等于1表示不放不缩

======0~1表示缩小

五、渐变linear-gradient

background-image:linear-gradient(

颜色1，

颜色2，

颜色3........)

多个颜色逐渐变化的视觉效果

一般用于设置盒子效果

注意1.取值 transparent透明======ragb(0,0,0,0.5==透明度)

2.透明度 opacity

赵大宝子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
平面转换的位移，旋转，缩放，渐变

2.默认的旋转点可以更改-----transfrom-origin(加给需要更改的元素本身）=====可取值方位名词（最常用）====left top right bottom center。注意1.取值 transparent透明======ragb(0,0,0,0.5==透明度)1.transfrom：rotate（角度）单位deg------可取正值，顺时针转动。注意点：1.transform做复合属性，做多重转换不能分开写，后面的会层叠前面的。--------负值，逆时针转动。
复制链接

扫一扫