首页 前端知识 移动web变形,旋转,缩放,渐变

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

2024-06-13 21:06:09 前端知识 前端哥 904 308 我要收藏

移动web变形,旋转,缩放

    • 变形 transform(2D)
    • 位移 translate
      • 盒子水平和垂直
    • 旋转 rotate
      • 设置中心点 transform-origin
      • 多形态变形小技巧
    • 缩放 scale
    • 渐变

变形 transform(2D)

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

位移 translate

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

语法:

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

问题:

  1. 它和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>

多形态变形小技巧

  1. 如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。

     transform: translate(-50%, -50%) rotate(360deg);
    
  2. 注意,多个值之前用 空格隔开。

    <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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11981.html
标签
评论
发布的文章

Vue——事件修饰符

2024-06-20 00:06:30

dhtmlx-gantt 甘特图

2024-06-20 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!