CSS3 2D转换

最新推荐文章于 2024-02-21 13:06:16 发布

小花fafa

最新推荐文章于 2024-02-21 13:06:16 发布

阅读量84

点赞数

分类专栏： css学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/laisy334514/article/details/119706113

版权

css学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.移动 translate

语法：transform:translate(x,y) | translateX(n) | translateY(n)

重点：不会影响其他元素的位置

translate中百分比单位是相对于自身元素

对行内标签没有效果

☆利用定位 + translate 实现水平垂直居中

<!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>Document</title>
  <style>
    .big {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .small {
      /* 重点在这里，先用定位让小盒子向下向右移动大盒子的50%，此时位置会有些偏 */
      position: absolute;
      top: 50%;
      left: 50%;
      /* 然后让小盒子再往回移动自身的50% */
      transform: translate(-50%, -50%);
      /* ****************************************** */
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="small"></div>
  </div>
</body>

</html>

2.旋转rotate

语法：transform:rotate(度数)

重点：rotate里面跟度数，单位是deg

角度为正时，顺时针，角度为负时，逆时针

默认的旋转中心点是元素的中心点

<style>
    .big {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transform: rotate(45deg);
    }
</style>

<div class="big"></div>

设置旋转中心点：transform-orign: x y;

x和y用空格隔开
默认是50%,50%
还可以是px或者方位名词(top bottom left right...)

<style>
    .big {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
    }

    .little {
      width: 100px;
      height: 100px;
      background-color: aqua;
      transform-origin: bottom right;
      transform: rotate(45deg);
    }
</style>

<div class="big">
    <div class="little"></div>
</div>

可以看到，此时的旋转中心点是bottom right 右下角

3.缩放scale

语法：transform:scale(x,y)

重点：x和y用逗号分隔

transform:scale(1,1) 宽高都放大一倍，相当于没有缩放

transform:scale(2,2) 宽高都放大两倍如果只写一个参数 scale(2) 与此效果相同

transform:scale(0.5,0.5) 缩小一半

默认以中心点缩放，且不会影响其他盒子

<style>
    div {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-left: 20px;
    }

    .one:hover {
      transform: scale(2);
    }

    .two {
      background-color: blue;
    }
</style>

<div class="one"></div>
<div class="two"></div>

可以看到，当鼠标经过粉色盒子时，粉色盒子放大为原来的两倍，但是蓝色盒子并没有被挤开，只是部分被遮挡了。