前端小白一文掌握 CSS3 2D转换transform

最新推荐文章于 2024-06-02 18:45:32 发布

瑶琴AI前端

最新推荐文章于 2024-06-02 18:45:32 发布

阅读量393

点赞数 7

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

本文链接：https://blog.csdn.net/weixin_40348267/article/details/138750995

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

CSS3 中的转化 transform 属性是 CSS 内容中很重要的一个知识点，用于对元素进行变换，包括平移、旋转、缩放、倾斜等。这些变换可以在不改变元素文档流位置的情况下改变元素的外观和位置，让网页能显示更加酷炫的效果。今天瑶琴带大家来学习或复习这些两个知识点。

transform 属性有 2D 和 3D 两种转换，本篇介绍 transform2D 的属性。

1.平移（Translate）：

平移指移动元素的位置，可以沿着水平（X轴）和垂直（Y轴）方向进行。语法如下：


.element {
  transform: translate(X轴平移值, Y轴平移值);
}
//示例
/* 向右平移50像素，向下平移20像素 */
.box {
  transform: translate(50px, 20px);
}
/* 向右平移50像素，垂直方向保持不变 */
.element {
  transform: translateX(50px);
}
/* 向下平移20像素，水平方向保持不变 */
.element {
  transform: translateY(20px);
}

2.旋转（Rotate）：

旋转元素，使其围绕指定点旋转一定角度。语法如下：

.element {
  transform: rotate(旋转角度);
}
//示例
/* 顺时针旋转30度 */
.img {
  transform: rotate(30deg);
}
/* 仅水平方向顺时针旋转30度 */
.element {
  transform: rotate(30deg);
}
/* 仅垂直方向顺时针旋转30度 */
.element {
  transform: rotate(30deg);
  transform-origin: center bottom;
}

3.缩放（Scale）：

缩放元素，可以放大或缩小元素的尺寸。语法如下：

.element {
  transform: scale(X轴缩放因子, Y轴缩放因子);
}
//示例
/* 水平方向缩小为原来的一半，垂直方向放大为原来的1.5倍 */
.icon {
  transform: scale(0.5, 1.5);
}
/* 仅水平方向放大为原来的1.5倍，垂直方向保持不变 */
.element {
  transform: scaleX(1.5);
}
/* 仅垂直方向缩小为原来的0.8倍，水平方向保持不变 */
.element {
  transform: scaleY(0.8);
}

4.倾斜（Skew）：

倾斜元素，使其在水平和垂直方向上倾斜一定角度。语法如下：

.element {
  transform: skew(X轴倾斜角度, Y轴倾斜角度);
}
//示例
/* 水平方向倾斜30度，垂直方向不倾斜 */
.text {
  transform: skew(30deg, 0deg);
}
/* 仅水平方向倾斜30度，垂直方向保持不变 */
.element {
  transform: skewX(30deg);
}
/* 仅垂直方向倾斜30度，水平方向保持不变 */
.element {
  transform: skewY(30deg);
}

5.组合变换：

你可以组合多个变换来同时应用于一个元素。多个变换可以通过空格分隔。示例：

/* 先向右平移50像素，然后顺时针旋转30度 */
.element {
  transform: translate(50px) rotate(30deg);
}

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transform Examples</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      margin: 20px;
      display: inline-block;
      transition: transform 0.3s ease; /* 添加平滑的过渡效果 */
    }

    /* 平移示例 */
    .translate-x {
      transform: translateX(50px);
    }

    .translate-y {
      transform: translateY(20px);
    }

    /* 旋转示例 */
    .rotate {
      transform: rotate(30deg);
    }

    /* 缩放示例 */
    .scale-x {
      transform: scaleX(1.5);
    }

    .scale-y {
      transform: scaleY(0.8);
    }

    /* 倾斜示例 */
    .skew-x {
      transform: skewX(30deg);
    }

    .skew-y {
      transform: skewY(30deg);
    }
  </style>
</head>
<body>
  <div class="element translate-x">平移-X</div>
  <div class="element translate-y">平移-Y</div>
  <div class="element rotate">旋转</div>
  <div class="element scale-x">缩放-X</div>
  <div class="element scale-y">缩放-Y</div>
  <div class="element skew-x">倾斜-X</div>
  <div class="element skew-y">倾斜-Y</div>
</body>
</html>

以上就是 CSS3 中关于转换 transform2D 的知识点，上面的示例，初学者可以粘贴到 HTML 文件中并在浏览器中运行，以查看不同的转换效果。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

瑶琴AI前端

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端小白一文掌握 CSS3 2D转换transform

CSS3 中的转化 transform 属性是 CSS 内容中很重要的一个知识点，用于对元素进行变换，包括平移、旋转、缩放、倾斜等。这些变换可以在不改变元素文档流位置的情况下改变元素的外观和位置，让网页能显示更加酷炫的效果。以上就是 CSS3 中关于转换 transform2D 的知识点，上面的示例，初学者可以粘贴到 HTML 文件中并在浏览器中运行，以查看不同的转换效果。平移指移动元素的位置，可以沿着水平（X轴）和垂直（Y轴）方向进行。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
复制链接

扫一扫