CSS动画中的 transform 之 translate（平移）

最新推荐文章于 2024-05-11 18:05:32 发布

打响第一枪

最新推荐文章于 2024-05-11 18:05:32 发布

阅读量1k

点赞数 7

文章标签： css

本文链接：https://blog.csdn.net/wcxrib/article/details/135942216

版权

CSS平移主要指的是将一个图形或者元素在二维空间（通常是指页面或窗口）上进行平移。这种操作可以通过CSS的translate属性实现。

在CSS中，translate是一个内置的函数，它可以用来将元素的位置进行平移。具体来说，translate有两个主要的参数x和y，分别代表要沿水平方向和垂直方向移动的距离。例如，translate(50px, 50px)会使得元素在页面上向右和平向下移动50像素。

此外，translate还可以与其他变换属性结合使用，如transform属性，以实现更复杂的视觉效果。例如，translateX(x)表示只在水平方向移动，而translateY(y)表示只在垂直方向移动。如果需要同时在两个方向都移动，可以使用translate(x, y)。

CSS中的二维坐标系如下:

注意：当前的二维坐标系与数学中的二维坐标系不一样，原点（0，0）在右上，为(left，top)，y轴正方向（向下），与常见的中的y轴正向不一样，x轴相同。

在这里插入图片描述

transform: translate(x,y); // 或者分开写
transform: translateX(n); // 沿x轴方向，参数为正沿x轴正向，为负沿x轴负向
transform: translateY(n); // 沿y轴方向，参数为正沿y轴正向，为负沿y轴负向

/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
transform: translate(x, y); 
transform: translate(100px, 100px);
/* 1. 我们如果只移动x坐标 */
transform: translate(100px, 0);
transform: translateX(100px);
/* 2. 我们如果只移动y坐标 */
transform: translate(0, 100px); */
transform: translateY(100px);

translate最大的优点：不会影响到其他元素的位置
参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言的
对行内标签不起效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>translate平移</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="flex">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
</body>
</html>

.flex {
    display: flex;
}

.box {
    width: 200px;
    height: 200px;

}

.box1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.box1 {
    background-color: blue;
    transition: all 0.3s ease; /*添加过渡效果，使平移变得更平滑*/
}

.box1:hover {
	/*transform: translateY(100px);*/
    /*transform: translateX(100px);*/
    transform: translate(100px, 100px);
}

.box2 {
    background-color: brown;
}

如图：
在这里插入图片描述
配合CSS动画属性：transition过渡，可以是平移更平滑，如图：

1、CSS动画属性：transition过渡、 transform变形、animation动画

打响第一枪

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS动画中的 transform 之 translate（平移）

CSS平移主要指的是将一个图形或者元素在二维空间（通常是指页面或窗口）上进行平移。这种操作可以通过CSS的translate属性实现。在CSS中，translate是一个内置的函数，它可以用来将元素的位置进行平移。具体来说，translate有两个主要的参数x和y，分别代表要沿水平方向和垂直方向移动的距离。例如，会使得元素在页面上向右和平向下移动50像素。此外，translate还可以与其他变换属性结合使用，如transform属性，以实现更复杂的视觉效果。例如，表示只在水平方向移动，而。
复制链接

扫一扫