详解CSS3 2D转换及易忽略的相关知识点( 移动translate，旋转rotate，缩放scale)

Running&Lover的博客

已于 2022-02-24 16:32:24 修改

阅读量584

点赞数 1

分类专栏： CSS 文章标签： css3 css 几何学

于 2022-02-22 23:28:21 首次发布

本文链接：https://blog.csdn.net/m0_49662897/article/details/123079010

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

CSS3 2D转换：

转换(transform),可以实现元素的位移，旋转，缩放等效果，transform可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

二维坐标系：

2D转换是改变标签在二维平面上的位置和形状的一种技术

在这里插入图片描述

2D转换之移动translate：

(1)移动语法：

			/* 1.x就是在x轴移动的位置，y就是在y轴上移动的位置 */
            /* transform: translate(x,y); */
            /* transform: translate(100px,100px); */
            /* 2.只移动x坐标，两种写法*/
            /* transform: translate(100px,0); */
            transform: translateX(100px);
            /* 3.只移动y坐标，两种写法*/
            /* transform: translate(100px,0); */    
            transform: translateY(100px);

(2)重点（易忽略的点）

定义2D转换中的移动，沿着X和Y轴移动元素
注：translate最大优点：不会影响到其他元素的位置，例如：
原来位置：

向x轴，y轴移动30px后的位置：
上在这里插入图片描述
上述发现，下面的盒子的位置没有收到任何影响

translate中的百分比单位是相对于自身元素的translate:(50%,50%);如果里面的是%参数，那么移动的距离是盒子自身的宽度或者高度来对比的，比如，盒子的width:100px,height:100px，translate:(50%,50%)的意思，向x轴正方向（水平向右），y轴正方向（垂直向下）各移动50px
对行内标签没有效果

2D转换之旋转rotate：

2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

语法：transform:rotate(度数)
注意：rotate里面跟度数，单位deg 比如rotate(45deg)，角度为正时，顺时针，负时，为逆时针，默认旋转的中心点是元素的中心点

2D转换之中心点transform-origin：

我们可以设置元素转换的中心点

语法：transform-origin: x y; x和y中间是用空格分开
注意：

参数x和y中间是用空格分开
x,y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y 设置像素或者方位名词（top bottom left center）

接下来写了一个小案例验证了一下：

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      transition: all 0.6s;
      /* 1.通过方位名词来设置盒子的中心点 */
      /* transform-origin: left bottom; */
      /* 2.默认的50% 50% 等价于center center */
      /* transform-origin: 50% 50%; */
      /* 3.可以是px像素 */
      transform-origin: 50px 50px;

    }
    div:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <div></div>
</body>

2D转换之缩放scale：

缩放，意思就是加上这个属性就可以控制它的放大和缩小

语法：transform:scale(x,y)

注意：

参数x，y用逗号分隔，参数不跟单位，是倍数的意思
transform:scale(1,1) : 宽和高都放大一倍，相当于没有放大
transform：scale(2,2): 宽和高都放大了两倍
transform：scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform：scale(0.5,0.5): 缩小
scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不会影响其他盒子

易忽略及易错点思考：
当我们在做项目时，可能会有这样的需求，鼠标移到某个盒子的时候，这个盒子会放大或者缩小，但盒子的放大和缩小并不会影响到其他盒子的布局，这时候就用到了scale这个属性了。如果在鼠标移动到盒子的时候通过采用改变宽度和高度的方式,这样是会影响到其他盒子的布局(缩放宽度是两侧都会发生变化，缩放高度只会在盒子的下边缘进行缩放，上边缘的位置不变)，而scale属性缩放盒子，盒子的四个边缘都会变化，且不会影响到其他盒子的布局

2D转换之综合写法：

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all 0.6s;
    }
    div:hover {
      /* 2D转换综合写法，涉及到多个转换时，各个属性用空格分开，例子如下 */
      /* 注意：当同时有位移和其他属性时，记得要将位移放在最前,先旋转再移动的话容易跑偏*/
      transform: translate(100px,50px) rotate(180deg) scale(1.5) ;
    }
  </style>
</head>
<body>
  <div></div>
</body>