移动web变形,旋转,缩放,渐变

鹏zxp

已于 2023-01-24 19:45:03 修改

阅读量827

点赞数 1

文章标签：前端 css css3

于 2023-01-24 14:27:31 首次发布

本文链接：https://blog.csdn.net/m0_74229555/article/details/128741801

版权

移动web变形,旋转,缩放

变形 transform（2D）

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

语法：

 /* 变形 transform-- 位移 translate*/
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

问题：

它和margin的区别。
- margin移动盒子会影响其余的盒子。把其他人挤走。
- 位移translate移动盒子不会影响其他的盒子。不脱标。

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 transform: translateX(100%);

盒子水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中。

.inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }
	/* 了解即可 */
    /* .inner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    } */
	/*分析:*/
    .inner { 
     width: 200px;
     height: 200px;
     background-color: purple; 
    /* 左侧全部充满 */
     margin-left: auto; 
    /* 右侧全部充满 */
     margin-right: auto; 
    /* margin: 0 auto; */
    }

旋转 rotate

旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

  <style>
    img {
      width: 200px;
      transition: .5s;
    }

    img:hover {
      /* 旋转语法 */
      transform: rotate(-360deg);
    }

    .arr {
      width: 40px;
      height: 40px;
      border-right: 2px solid pink;
      border-bottom: 2px solid pink;
      transform: rotate(-45deg);
    }
  </style>
</head>

<body>
  <img src="./images/p4-tx3.png" alt="">
  <div class="arr"></div>
</body>

设置中心点 transform-origin

设置旋转的中心点位置

transform-origin: right bottom;

  <style>
    img {
      width: 200px;
      transition: .5s;
      /* 旋转中心点 */
      /* transform-origin: right bottom; */
    }
    img:hover {
      /* 旋转语法 */
      transform: rotate(-360deg);
    }
  </style>
</head>

<body>
  <img src="./images/p4-tx3.png" alt="">
</body>

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
```
 transform: translate(-50%, -50%) rotate(360deg);
```
注意，多个值之前用空格隔开。

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 1.1 设置大盒子基本样式 */
        .box {
            width: 800px;
            height: 200px;
            border: 2px solid pink;
            margin: 100px auto;
        }
        /* 1.2 设置过渡效果 */
        .box img {
            transition: all 10s;
        }
        /* 1.3 设置多重转换效果 */
        .box:hover img {
            /* 正确写法语法 各个属性值之间 使用空格隔开  */
            /* transform: translate() rotate(); */
            transform: translateX(600px) rotate(360deg);
            /* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。  */ 
            /* 旋转会改变网页元素的坐标轴方向 */
            /* transform: rotate(360deg) translateX(600px); */
        }
    </style>
</head>

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

缩放 scale

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

  <style>
    /* img {
      width: 200px;
      transition: all .5s;
    }

    img:hover {
      width: 400px;
    } */
    img {
      display: block;
      margin: 100px auto;
      transition: all .6s;
    }

    img:hover {
      /* 以中心点往四周缩放 */
      transform: scale(1.5);
    }
  </style>
</head>

<body>
  <img src="./images/hero.jpeg" alt="">
</body>

渐变

线性渐变

基本语法：

      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))

  <style>
    .box {
      width: 300px;
      height: 300px;
      /* background-color: pink; */
      /* background-image: linear-gradient(red, green); */
      /* 默认的方向是 to bottom */
      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
      /* background-image: linear-gradient(方向,颜色1, 颜色2...颜色n); */
      /* background-image: linear-gradient(to right, red, green, blue); */

    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

鹏zxp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动web变形,旋转,缩放,渐变

* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。/* 正确写法语法各个属性值之间使用空格隔开 */移动的时候可以写百分比，如果使用的百分比，移动的是盒子。如果需要移动，也需要旋转，则一定先写移动，后写旋转,/* 旋转会改变网页元素的坐标轴方向 *//* 1.1 设置大盒子基本样式 *//* 1.3 设置多重转换效果 *//* 1.2 设置过渡效果 *//* 以中心点往四周缩放 */如果是正度数，则是顺时针旋转。旋转可以让盒子旋转角度。/* 旋转中心点 */
复制链接

扫一扫