transform2D转换

CSS3 2D转换详解：translate、rotate与scale

最新推荐文章于 2023-03-13 14:15:06 发布

原创最新推荐文章于 2023-03-13 14:15:06 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html #html5 #经验分享

Web前端同时被 2 个专栏收录

21 篇文章

订阅专栏

HTML+ CSS

9 篇文章

订阅专栏

转换（transform) 是CSS3中具有颠覆性的特征之一，它可以实现元素的位移、旋转、缩放等效果，转换可简单理解为变形的意思。

以下是比较常用的三个属性：

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

二维坐标系

2D转换是改变在二维平面上的位置和形状的一种技术，在学习2D转换之前首先得了解一下二维坐标系
在数学中，坐标系是下面这样的

但是在网页中，二维坐标系是下面这样的
在这里插入图片描述

2D转换之移动-translate

translate是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

1. 语法

translate2D转换有三种语法形式，可以x，y轴可以混合写也可以分开写

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>2D转换</title>
    <style>
      div {
        background-color: skyblue;
        width: 300px;
        height: 300px;
        transform: translate(50px, 50px);
      }
    </style>
  </head>
  <body>
    <div>测试案例</div>
  </body>
</html>

在这里插入图片描述
2.重点总结

定义2D转换中的移动，沿着X和Y轴移动元素
translate量大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的：translate（50%，50%）
对行内标签没有效果

2D转换之旋转-rotate

2D旋转指定元素在二维平面内顺时针旋转或者逆时针旋转
1. 语法

transform:rotate(度数);

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>2D转换</title>
    <style>
      div {
        background-color: skyblue;
        width: 300px;
        height: 300px;
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div>测试案例</div>
  </body>
</html>

在这里插入图片描述

2. 重点总结

rotate里面限制度数，单位是deg
角度为正时顺时针旋转，为负时逆时针旋转
默认旋转的中心点是元素的中心点

3. 改变旋转中心点-transform-origin

语法：

transform-origin:x,y;

案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>2D转换</title>
    <style>
      div {
        background-color: skyblue;
        width: 300px;
        height: 300px;
        transform: rotate(90deg);
        transform-origin: right bottom;
      }
    </style>
  </head>
  <body>
    <div>测试案例</div>
  </body>
</html>

在这里插入图片描述

重点总结：

注意后面的参数x，y是用空格隔开的
x，y默认转换的中心点是元素的中心点（50% 50%）
可以给x y设置像素或者是方位名词（top bottom left right center）

2D转换之缩放-scale

scale可以实现元素的放大缩小

1. 语法

transform:scale(x,y);

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>2D转换</title>
    <style>
      div {
        background-color: skyblue;
        width: 300px;
        height: 300px;
        transform: scale(1.5);
      }
    </style>
  </head>
  <body>
    <div>测试案例</div>
  </body>
</html>

在这里插入图片描述

2.重点总结

注意其中的x，y使用逗号分隔的
transform：scale（1，1）相当于当前元素的1倍，元素并没有放大
transform：scale（2，2）相当于当前元素的2倍，元素放大原型元素的2倍
transform：scale（2）当括号中只写一个元素相当于scale（2，2）
transform：scale（0.5，0.5）表示缩小一半
scale缩放的最大优势：可以设置转换中心点缩放，默认的是以中心缩放，而且不影响其他盒子

2D转换的综合写法

语法

transform:translate() rotate() scale()；

注意：

同时使用多个转换，格式为：transform:translate() rotate() scale()
其顺序会影响转换的效果。（先旋转会改变坐标方向）
3. 当我们同时有位移和其他属性时，记得将位移放在最前面

transform2D转换

目录

二维坐标系

2D转换之移动-translate

2D转换之旋转-rotate

2D转换之缩放-scale

2D转换的综合写法